@enya-learning/nova 0.4.0 → 0.4.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 (139) hide show
  1. package/dist/chunks/vendor-base-ui-efqwzv4oinwg1f0d.js.map +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/package.json +26 -11
  4. package/changelog.md +0 -44
  5. package/components.json +0 -23
  6. package/eslint.config.js +0 -30
  7. package/plopfile.mjs +0 -49
  8. package/src/components/.gitkeep +0 -0
  9. package/src/components/accordion/accordion.mdx +0 -83
  10. package/src/components/accordion/accordion.tsx +0 -81
  11. package/src/components/accordion/index.ts +0 -1
  12. package/src/components/alert/alert.tsx +0 -76
  13. package/src/components/alert/index.ts +0 -1
  14. package/src/components/alert-dialog/alert-dialog.tsx +0 -187
  15. package/src/components/alert-dialog/index.ts +0 -1
  16. package/src/components/aspect-ratio/aspect-ratio.tsx +0 -22
  17. package/src/components/aspect-ratio/index.ts +0 -1
  18. package/src/components/avatar/avatar.tsx +0 -107
  19. package/src/components/avatar/index.ts +0 -1
  20. package/src/components/badge/badge.tsx +0 -52
  21. package/src/components/badge/index.ts +0 -1
  22. package/src/components/breadcrumb/breadcrumb.tsx +0 -122
  23. package/src/components/breadcrumb/index.ts +0 -1
  24. package/src/components/button/button.mdx +0 -255
  25. package/src/components/button/button.tsx +0 -59
  26. package/src/components/button/index.ts +0 -1
  27. package/src/components/button-group/button-group.tsx +0 -87
  28. package/src/components/button-group/index.ts +0 -1
  29. package/src/components/calendar/calendar.tsx +0 -228
  30. package/src/components/calendar/index.ts +0 -1
  31. package/src/components/card/card.tsx +0 -100
  32. package/src/components/card/index.ts +0 -1
  33. package/src/components/carousel/carousel.tsx +0 -243
  34. package/src/components/carousel/index.ts +0 -1
  35. package/src/components/chart/chart.tsx +0 -371
  36. package/src/components/chart/index.ts +0 -1
  37. package/src/components/checkbox/checkbox.tsx +0 -28
  38. package/src/components/checkbox/index.ts +0 -1
  39. package/src/components/collapsible/collapsible.tsx +0 -19
  40. package/src/components/collapsible/index.ts +0 -1
  41. package/src/components/combobox/combobox.tsx +0 -298
  42. package/src/components/combobox/index.ts +0 -1
  43. package/src/components/command/command.tsx +0 -193
  44. package/src/components/command/index.ts +0 -1
  45. package/src/components/context-menu/context-menu.tsx +0 -272
  46. package/src/components/context-menu/index.ts +0 -1
  47. package/src/components/dialog/dialog.tsx +0 -157
  48. package/src/components/dialog/index.ts +0 -1
  49. package/src/components/direction/direction.tsx +0 -4
  50. package/src/components/direction/index.ts +0 -1
  51. package/src/components/drawer/drawer.tsx +0 -134
  52. package/src/components/drawer/index.ts +0 -1
  53. package/src/components/dropdown-menu/dropdown-menu.tsx +0 -270
  54. package/src/components/dropdown-menu/index.ts +0 -1
  55. package/src/components/empty/empty.tsx +0 -104
  56. package/src/components/empty/index.ts +0 -1
  57. package/src/components/enya-logo/enya-logo.mdx +0 -174
  58. package/src/components/enya-logo/enya-logo.tsx +0 -383
  59. package/src/components/enya-logo/index.ts +0 -1
  60. package/src/components/field/field.tsx +0 -236
  61. package/src/components/field/index.ts +0 -1
  62. package/src/components/hover-card/hover-card.tsx +0 -51
  63. package/src/components/hover-card/index.ts +0 -1
  64. package/src/components/input/index.ts +0 -1
  65. package/src/components/input/input.tsx +0 -20
  66. package/src/components/input-group/index.ts +0 -1
  67. package/src/components/input-group/input-group.tsx +0 -157
  68. package/src/components/input-otp/index.ts +0 -1
  69. package/src/components/input-otp/input-otp.tsx +0 -84
  70. package/src/components/item/index.ts +0 -1
  71. package/src/components/item/item.tsx +0 -201
  72. package/src/components/kbd/index.ts +0 -1
  73. package/src/components/kbd/kbd.tsx +0 -26
  74. package/src/components/label/index.ts +0 -1
  75. package/src/components/label/label.tsx +0 -20
  76. package/src/components/menubar/index.ts +0 -1
  77. package/src/components/menubar/menubar.tsx +0 -281
  78. package/src/components/native-select/index.ts +0 -1
  79. package/src/components/native-select/native-select.tsx +0 -65
  80. package/src/components/navigation-menu/index.ts +0 -1
  81. package/src/components/navigation-menu/navigation-menu.tsx +0 -171
  82. package/src/components/pagination/index.ts +0 -1
  83. package/src/components/pagination/pagination.tsx +0 -133
  84. package/src/components/popover/index.ts +0 -1
  85. package/src/components/popover/popover.tsx +0 -88
  86. package/src/components/progress/index.ts +0 -1
  87. package/src/components/progress/progress.tsx +0 -83
  88. package/src/components/radio-group/index.ts +0 -1
  89. package/src/components/radio-group/radio-group.tsx +0 -36
  90. package/src/components/resizable/index.ts +0 -1
  91. package/src/components/resizable/resizable.tsx +0 -50
  92. package/src/components/scroll-area/index.ts +0 -1
  93. package/src/components/scroll-area/scroll-area.tsx +0 -53
  94. package/src/components/select/index.ts +0 -1
  95. package/src/components/select/select.tsx +0 -205
  96. package/src/components/separator/index.ts +0 -1
  97. package/src/components/separator/separator.tsx +0 -23
  98. package/src/components/sheet/index.ts +0 -1
  99. package/src/components/sheet/sheet.tsx +0 -137
  100. package/src/components/sidebar/index.ts +0 -1
  101. package/src/components/sidebar/sidebar.tsx +0 -722
  102. package/src/components/skeleton/index.ts +0 -1
  103. package/src/components/skeleton/skeleton.tsx +0 -13
  104. package/src/components/slider/index.ts +0 -1
  105. package/src/components/slider/slider.tsx +0 -52
  106. package/src/components/sonner/index.ts +0 -1
  107. package/src/components/sonner/sonner.tsx +0 -45
  108. package/src/components/spinner/index.ts +0 -1
  109. package/src/components/spinner/spinner.tsx +0 -15
  110. package/src/components/switch/index.ts +0 -1
  111. package/src/components/switch/switch.tsx +0 -30
  112. package/src/components/table/index.ts +0 -1
  113. package/src/components/table/table.tsx +0 -116
  114. package/src/components/tabs/index.ts +0 -1
  115. package/src/components/tabs/tabs.tsx +0 -80
  116. package/src/components/textarea/index.ts +0 -1
  117. package/src/components/textarea/textarea.tsx +0 -18
  118. package/src/components/toggle/index.ts +0 -1
  119. package/src/components/toggle/toggle.tsx +0 -45
  120. package/src/components/toggle-group/index.ts +0 -1
  121. package/src/components/toggle-group/toggle-group.tsx +0 -87
  122. package/src/components/tooltip/index.ts +0 -1
  123. package/src/components/tooltip/tooltip.tsx +0 -64
  124. package/src/hooks/use-mobile.ts +0 -21
  125. package/src/index.ts +0 -58
  126. package/src/lib/.gitkeep +0 -0
  127. package/src/lib/utils.ts +0 -6
  128. package/src/styles/nova-binding.css +0 -290
  129. package/src/styles/nova.css +0 -58
  130. package/src/styles/theme-nova.css +0 -201
  131. package/src/styles/typography.css +0 -215
  132. package/src/utils/index.ts +0 -1
  133. package/templates/component/component.tsx.hbs +0 -16
  134. package/templates/component/index.ts.hbs +0 -1
  135. package/templates/component/stories.tsx.hbs +0 -13
  136. package/tsconfig.json +0 -18
  137. package/tsconfig.lint.json +0 -14
  138. package/vite.config.ts +0 -101
  139. /package/{src → dist}/styles/globals.css +0 -0
@@ -1 +0,0 @@
1
- export * from "./skeleton"
@@ -1,13 +0,0 @@
1
- import { cn } from "../../lib/utils"
2
-
3
- function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
4
- return (
5
- <div
6
- data-slot="skeleton"
7
- className={cn("animate-pulse rounded-xl bg-muted", className)}
8
- {...props}
9
- />
10
- )
11
- }
12
-
13
- export { Skeleton }
@@ -1 +0,0 @@
1
- export * from "./slider"
@@ -1,52 +0,0 @@
1
- import { Slider as SliderPrimitive } from "@base-ui/react/slider"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- function Slider({
6
- className,
7
- defaultValue,
8
- value,
9
- min = 0,
10
- max = 100,
11
- ...props
12
- }: SliderPrimitive.Root.Props) {
13
- const _values = Array.isArray(value)
14
- ? value
15
- : Array.isArray(defaultValue)
16
- ? defaultValue
17
- : [min, max]
18
-
19
- return (
20
- <SliderPrimitive.Root
21
- className={cn("data-horizontal:w-full data-vertical:h-full", className)}
22
- data-slot="slider"
23
- defaultValue={defaultValue}
24
- value={value}
25
- min={min}
26
- max={max}
27
- thumbAlignment="edge"
28
- {...props}
29
- >
30
- <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
31
- <SliderPrimitive.Track
32
- data-slot="slider-track"
33
- className="relative grow overflow-hidden rounded-4xl bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3"
34
- >
35
- <SliderPrimitive.Indicator
36
- data-slot="slider-range"
37
- className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
38
- />
39
- </SliderPrimitive.Track>
40
- {Array.from({ length: _values.length }, (_, index) => (
41
- <SliderPrimitive.Thumb
42
- data-slot="slider-thumb"
43
- key={index}
44
- className="block size-4 shrink-0 rounded-4xl border border-primary bg-nova-white shadow-sm ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
45
- />
46
- ))}
47
- </SliderPrimitive.Control>
48
- </SliderPrimitive.Root>
49
- )
50
- }
51
-
52
- export { Slider }
@@ -1 +0,0 @@
1
- export * from "./sonner"
@@ -1,45 +0,0 @@
1
- "use client"
2
-
3
- import { useTheme } from "next-themes"
4
- import { Toaster as Sonner, type ToasterProps } from "sonner"
5
- import {
6
- CircleCheckIcon,
7
- InfoIcon,
8
- TriangleAlertIcon,
9
- OctagonXIcon,
10
- Loader2Icon,
11
- } from "lucide-react"
12
-
13
- const Toaster = ({ ...props }: ToasterProps) => {
14
- const { theme = "system" } = useTheme()
15
-
16
- return (
17
- <Sonner
18
- theme={theme as ToasterProps["theme"]}
19
- className="toaster group"
20
- icons={{
21
- success: <CircleCheckIcon className="size-4" />,
22
- info: <InfoIcon className="size-4" />,
23
- warning: <TriangleAlertIcon className="size-4" />,
24
- error: <OctagonXIcon className="size-4" />,
25
- loading: <Loader2Icon className="size-4 animate-spin" />,
26
- }}
27
- style={
28
- {
29
- "--normal-bg": "var(--popover)",
30
- "--normal-text": "var(--popover-foreground)",
31
- "--normal-border": "var(--border)",
32
- "--border-radius": "var(--radius)",
33
- } as React.CSSProperties
34
- }
35
- toastOptions={{
36
- classNames: {
37
- toast: "cn-toast",
38
- },
39
- }}
40
- {...props}
41
- />
42
- )
43
- }
44
-
45
- export { Toaster }
@@ -1 +0,0 @@
1
- export * from "./spinner"
@@ -1,15 +0,0 @@
1
- import { cn } from "../../lib/utils"
2
- import { Loader2Icon } from "lucide-react"
3
-
4
- function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
5
- return (
6
- <Loader2Icon
7
- role="status"
8
- aria-label="Loading"
9
- className={cn("size-4 animate-spin", className)}
10
- {...props}
11
- />
12
- )
13
- }
14
-
15
- export { Spinner }
@@ -1 +0,0 @@
1
- export * from "./switch"
@@ -1,30 +0,0 @@
1
- import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- function Switch({
6
- className,
7
- size = "default",
8
- ...props
9
- }: SwitchPrimitive.Root.Props & {
10
- size?: "sm" | "default"
11
- }) {
12
- return (
13
- <SwitchPrimitive.Root
14
- data-slot="switch"
15
- data-size={size}
16
- className={cn(
17
- "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
18
- className
19
- )}
20
- {...props}
21
- >
22
- <SwitchPrimitive.Thumb
23
- data-slot="switch-thumb"
24
- className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
25
- />
26
- </SwitchPrimitive.Root>
27
- )
28
- }
29
-
30
- export { Switch }
@@ -1 +0,0 @@
1
- export * from "./table"
@@ -1,116 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
-
5
- import { cn } from "../../lib/utils"
6
-
7
- function Table({ className, ...props }: React.ComponentProps<"table">) {
8
- return (
9
- <div
10
- data-slot="table-container"
11
- className="relative w-full overflow-x-auto"
12
- >
13
- <table
14
- data-slot="table"
15
- className={cn("w-full caption-bottom text-sm", className)}
16
- {...props}
17
- />
18
- </div>
19
- )
20
- }
21
-
22
- function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
23
- return (
24
- <thead
25
- data-slot="table-header"
26
- className={cn("[&_tr]:border-b", className)}
27
- {...props}
28
- />
29
- )
30
- }
31
-
32
- function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
33
- return (
34
- <tbody
35
- data-slot="table-body"
36
- className={cn("[&_tr:last-child]:border-0", className)}
37
- {...props}
38
- />
39
- )
40
- }
41
-
42
- function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
43
- return (
44
- <tfoot
45
- data-slot="table-footer"
46
- className={cn(
47
- "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
48
- className
49
- )}
50
- {...props}
51
- />
52
- )
53
- }
54
-
55
- function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56
- return (
57
- <tr
58
- data-slot="table-row"
59
- className={cn(
60
- "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
61
- className
62
- )}
63
- {...props}
64
- />
65
- )
66
- }
67
-
68
- function TableHead({ className, ...props }: React.ComponentProps<"th">) {
69
- return (
70
- <th
71
- data-slot="table-head"
72
- className={cn(
73
- "h-12 px-3 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
74
- className
75
- )}
76
- {...props}
77
- />
78
- )
79
- }
80
-
81
- function TableCell({ className, ...props }: React.ComponentProps<"td">) {
82
- return (
83
- <td
84
- data-slot="table-cell"
85
- className={cn(
86
- "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
87
- className
88
- )}
89
- {...props}
90
- />
91
- )
92
- }
93
-
94
- function TableCaption({
95
- className,
96
- ...props
97
- }: React.ComponentProps<"caption">) {
98
- return (
99
- <caption
100
- data-slot="table-caption"
101
- className={cn("mt-4 text-sm text-muted-foreground", className)}
102
- {...props}
103
- />
104
- )
105
- }
106
-
107
- export {
108
- Table,
109
- TableHeader,
110
- TableBody,
111
- TableFooter,
112
- TableHead,
113
- TableRow,
114
- TableCell,
115
- TableCaption,
116
- }
@@ -1 +0,0 @@
1
- export * from "./tabs"
@@ -1,80 +0,0 @@
1
- import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "../../lib/utils"
5
-
6
- function Tabs({
7
- className,
8
- orientation = "horizontal",
9
- ...props
10
- }: TabsPrimitive.Root.Props) {
11
- return (
12
- <TabsPrimitive.Root
13
- data-slot="tabs"
14
- data-orientation={orientation}
15
- className={cn(
16
- "group/tabs flex gap-2 data-horizontal:flex-col",
17
- className
18
- )}
19
- {...props}
20
- />
21
- )
22
- }
23
-
24
- const tabsListVariants = cva(
25
- "group/tabs-list inline-flex w-fit items-center justify-center rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none",
26
- {
27
- variants: {
28
- variant: {
29
- default: "bg-muted",
30
- line: "gap-1 bg-transparent",
31
- },
32
- },
33
- defaultVariants: {
34
- variant: "default",
35
- },
36
- }
37
- )
38
-
39
- function TabsList({
40
- className,
41
- variant = "default",
42
- ...props
43
- }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
44
- return (
45
- <TabsPrimitive.List
46
- data-slot="tabs-list"
47
- data-variant={variant}
48
- className={cn(tabsListVariants({ variant }), className)}
49
- {...props}
50
- />
51
- )
52
- }
53
-
54
- function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
55
- return (
56
- <TabsPrimitive.Tab
57
- data-slot="tabs-trigger"
58
- className={cn(
59
- "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
60
- "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
61
- "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
62
- "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
63
- className
64
- )}
65
- {...props}
66
- />
67
- )
68
- }
69
-
70
- function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
71
- return (
72
- <TabsPrimitive.Panel
73
- data-slot="tabs-content"
74
- className={cn("flex-1 text-sm outline-none", className)}
75
- {...props}
76
- />
77
- )
78
- }
79
-
80
- export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
@@ -1 +0,0 @@
1
- export * from "./textarea"
@@ -1,18 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6
- return (
7
- <textarea
8
- data-slot="textarea"
9
- className={cn(
10
- "flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
11
- className
12
- )}
13
- {...props}
14
- />
15
- )
16
- }
17
-
18
- export { Textarea }
@@ -1 +0,0 @@
1
- export * from "./toggle"
@@ -1,45 +0,0 @@
1
- "use client"
2
-
3
- import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
4
- import { cva, type VariantProps } from "class-variance-authority"
5
-
6
- import { cn } from "../../lib/utils"
7
-
8
- const toggleVariants = cva(
9
- "group/toggle inline-flex items-center justify-center gap-1 rounded-4xl text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
10
- {
11
- variants: {
12
- variant: {
13
- default: "bg-transparent",
14
- outline: "border border-input bg-transparent hover:bg-muted",
15
- },
16
- size: {
17
- default:
18
- "h-9 min-w-9 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
19
- sm: "h-8 min-w-8 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
20
- lg: "h-10 min-w-10 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
21
- },
22
- },
23
- defaultVariants: {
24
- variant: "default",
25
- size: "default",
26
- },
27
- }
28
- )
29
-
30
- function Toggle({
31
- className,
32
- variant = "default",
33
- size = "default",
34
- ...props
35
- }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
36
- return (
37
- <TogglePrimitive
38
- data-slot="toggle"
39
- className={cn(toggleVariants({ variant, size, className }))}
40
- {...props}
41
- />
42
- )
43
- }
44
-
45
- export { Toggle, toggleVariants }
@@ -1 +0,0 @@
1
- export * from "./toggle-group"
@@ -1,87 +0,0 @@
1
- import * as React from "react"
2
- import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
3
- import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
4
- import { type VariantProps } from "class-variance-authority"
5
-
6
- import { cn } from "../../lib/utils"
7
- import { toggleVariants } from "../toggle"
8
-
9
- const ToggleGroupContext = React.createContext<
10
- VariantProps<typeof toggleVariants> & {
11
- spacing?: number
12
- orientation?: "horizontal" | "vertical"
13
- }
14
- >({
15
- size: "default",
16
- variant: "default",
17
- spacing: 2,
18
- orientation: "horizontal",
19
- })
20
-
21
- function ToggleGroup({
22
- className,
23
- variant,
24
- size,
25
- spacing = 2,
26
- orientation = "horizontal",
27
- children,
28
- ...props
29
- }: ToggleGroupPrimitive.Props &
30
- VariantProps<typeof toggleVariants> & {
31
- spacing?: number
32
- orientation?: "horizontal" | "vertical"
33
- }) {
34
- return (
35
- <ToggleGroupPrimitive
36
- data-slot="toggle-group"
37
- data-variant={variant}
38
- data-size={size}
39
- data-spacing={spacing}
40
- data-orientation={orientation}
41
- style={{ "--gap": spacing } as React.CSSProperties}
42
- className={cn(
43
- "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-4xl data-vertical:flex-col data-vertical:items-stretch",
44
- className
45
- )}
46
- {...props}
47
- >
48
- <ToggleGroupContext.Provider
49
- value={{ variant, size, spacing, orientation }}
50
- >
51
- {children}
52
- </ToggleGroupContext.Provider>
53
- </ToggleGroupPrimitive>
54
- )
55
- }
56
-
57
- function ToggleGroupItem({
58
- className,
59
- children,
60
- variant = "default",
61
- size = "default",
62
- ...props
63
- }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
64
- const context = React.useContext(ToggleGroupContext)
65
-
66
- return (
67
- <TogglePrimitive
68
- data-slot="toggle-group-item"
69
- data-variant={context.variant || variant}
70
- data-size={context.size || size}
71
- data-spacing={context.spacing}
72
- className={cn(
73
- "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
74
- toggleVariants({
75
- variant: context.variant || variant,
76
- size: context.size || size,
77
- }),
78
- className
79
- )}
80
- {...props}
81
- >
82
- {children}
83
- </TogglePrimitive>
84
- )
85
- }
86
-
87
- export { ToggleGroup, ToggleGroupItem }
@@ -1 +0,0 @@
1
- export * from "./tooltip"
@@ -1,64 +0,0 @@
1
- import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- function TooltipProvider({
6
- delay = 0,
7
- ...props
8
- }: TooltipPrimitive.Provider.Props) {
9
- return (
10
- <TooltipPrimitive.Provider
11
- data-slot="tooltip-provider"
12
- delay={delay}
13
- {...props}
14
- />
15
- )
16
- }
17
-
18
- function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
19
- return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
20
- }
21
-
22
- function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
23
- return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
24
- }
25
-
26
- function TooltipContent({
27
- className,
28
- side = "top",
29
- sideOffset = 4,
30
- align = "center",
31
- alignOffset = 0,
32
- children,
33
- ...props
34
- }: TooltipPrimitive.Popup.Props &
35
- Pick<
36
- TooltipPrimitive.Positioner.Props,
37
- "align" | "alignOffset" | "side" | "sideOffset"
38
- >) {
39
- return (
40
- <TooltipPrimitive.Portal>
41
- <TooltipPrimitive.Positioner
42
- align={align}
43
- alignOffset={alignOffset}
44
- side={side}
45
- sideOffset={sideOffset}
46
- className="isolate z-50"
47
- >
48
- <TooltipPrimitive.Popup
49
- data-slot="tooltip-content"
50
- className={cn(
51
- "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
52
- className
53
- )}
54
- {...props}
55
- >
56
- {children}
57
- <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5 rtl:data-[side=inline-end]:-translate-x-[1.5px] rtl:data-[side=inline-start]:-translate-x-[-1.5px] rtl:data-[side=left]:-translate-x-[-1.5px] rtl:data-[side=right]:-translate-x-[1.5px]" />
58
- </TooltipPrimitive.Popup>
59
- </TooltipPrimitive.Positioner>
60
- </TooltipPrimitive.Portal>
61
- )
62
- }
63
-
64
- export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
@@ -1,21 +0,0 @@
1
- import * as React from "react"
2
-
3
- const MOBILE_BREAKPOINT = 768
4
-
5
- export function useIsMobile() {
6
- const [isMobile, setIsMobile] = React.useState<boolean | undefined>(() => {
7
- if (typeof window === "undefined") return undefined
8
- return window.innerWidth < MOBILE_BREAKPOINT
9
- })
10
-
11
- React.useEffect(() => {
12
- const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
13
- const onChange = () => {
14
- setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
15
- }
16
- mql.addEventListener("change", onChange)
17
- return () => mql.removeEventListener("change", onChange)
18
- }, [])
19
-
20
- return !!isMobile
21
- }