diffhub 0.1.1 → 0.1.3

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 (163) hide show
  1. package/.next/standalone/apps/web/.next/BUILD_ID +1 -1
  2. package/.next/standalone/apps/web/.next/build-manifest.json +3 -3
  3. package/.next/standalone/apps/web/.next/prerender-manifest.json +3 -3
  4. package/.next/standalone/apps/web/.next/server/app/_global-error.html +1 -1
  5. package/.next/standalone/apps/web/.next/server/app/_global-error.rsc +1 -1
  6. package/.next/standalone/apps/web/.next/server/app/_global-error.segments/__PAGE__.segment.rsc +1 -1
  7. package/.next/standalone/apps/web/.next/server/app/_global-error.segments/_full.segment.rsc +1 -1
  8. package/.next/standalone/apps/web/.next/server/app/_global-error.segments/_head.segment.rsc +1 -1
  9. package/.next/standalone/apps/web/.next/server/app/_global-error.segments/_index.segment.rsc +1 -1
  10. package/.next/standalone/apps/web/.next/server/app/_global-error.segments/_tree.segment.rsc +1 -1
  11. package/.next/standalone/apps/web/.next/server/app/_not-found/page.js +1 -1
  12. package/.next/standalone/apps/web/.next/server/app/_not-found/page.js.nft.json +1 -1
  13. package/.next/standalone/apps/web/.next/server/app/_not-found/page_client-reference-manifest.js +1 -1
  14. package/.next/standalone/apps/web/.next/server/app/_not-found.html +1 -1
  15. package/.next/standalone/apps/web/.next/server/app/_not-found.rsc +17 -16
  16. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_full.segment.rsc +17 -16
  17. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_head.segment.rsc +4 -4
  18. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_index.segment.rsc +6 -5
  19. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_not-found/__PAGE__.segment.rsc +2 -2
  20. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_not-found.segment.rsc +3 -3
  21. package/.next/standalone/apps/web/.next/server/app/_not-found.segments/_tree.segment.rsc +2 -2
  22. package/.next/standalone/apps/web/.next/server/app/api/comments/route.js +2 -2
  23. package/.next/standalone/apps/web/.next/server/app/api/comments/route.js.nft.json +1 -1
  24. package/.next/standalone/apps/web/.next/server/app/api/diff/route.js +4 -3
  25. package/.next/standalone/apps/web/.next/server/app/api/diff/route.js.nft.json +1 -1
  26. package/.next/standalone/apps/web/.next/server/app/api/discard/route.js +3 -3
  27. package/.next/standalone/apps/web/.next/server/app/api/discard/route.js.nft.json +1 -1
  28. package/.next/standalone/apps/web/.next/server/app/api/file/route.js +3 -3
  29. package/.next/standalone/apps/web/.next/server/app/api/file/route.js.nft.json +1 -1
  30. package/.next/standalone/apps/web/.next/server/app/api/files/route.js +3 -3
  31. package/.next/standalone/apps/web/.next/server/app/api/files/route.js.nft.json +1 -1
  32. package/.next/standalone/apps/web/.next/server/app/api/open/route.js +1 -1
  33. package/.next/standalone/apps/web/.next/server/app/api/open/route.js.nft.json +1 -1
  34. package/.next/standalone/apps/web/.next/server/app/favicon.ico/route.js +1 -1
  35. package/.next/standalone/apps/web/.next/server/app/favicon.ico/route.js.nft.json +1 -1
  36. package/.next/standalone/apps/web/.next/server/app/index.html +1 -1
  37. package/.next/standalone/apps/web/.next/server/app/index.rsc +16 -15
  38. package/.next/standalone/apps/web/.next/server/app/index.segments/__PAGE__.segment.rsc +3 -3
  39. package/.next/standalone/apps/web/.next/server/app/index.segments/_full.segment.rsc +16 -15
  40. package/.next/standalone/apps/web/.next/server/app/index.segments/_head.segment.rsc +4 -4
  41. package/.next/standalone/apps/web/.next/server/app/index.segments/_index.segment.rsc +6 -5
  42. package/.next/standalone/apps/web/.next/server/app/index.segments/_tree.segment.rsc +2 -2
  43. package/.next/standalone/apps/web/.next/server/app/page/react-loadable-manifest.json +1 -2
  44. package/.next/standalone/apps/web/.next/server/app/page.js +2 -2
  45. package/.next/standalone/apps/web/.next/server/app/page.js.nft.json +1 -1
  46. package/.next/standalone/apps/web/.next/server/app/page_client-reference-manifest.js +1 -1
  47. package/.next/standalone/apps/web/.next/server/chunks/[externals]_shiki_wasm_0~fgmgp._.js +3 -0
  48. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__01.zj5h._.js +3 -0
  49. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__05ejtyr._.js +3 -0
  50. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0e2dp4h._.js +3 -0
  51. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0egk6ui._.js +3 -0
  52. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0i6i-~n._.js +3 -0
  53. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0sv4hr9._.js +3 -0
  54. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0tbrp5x._.js +13 -0
  55. package/.next/standalone/apps/web/.next/server/chunks/_0r24f4c._.js +69 -0
  56. package/.next/standalone/apps/web/.next/server/chunks/node_modules_@pierre_theme_dist_pierre-dark_mjs_0ojo3_n._.js +3 -0
  57. package/.next/standalone/apps/web/.next/server/chunks/node_modules_@pierre_theme_dist_pierre-light_mjs_0pw9wwg._.js +3 -0
  58. package/.next/standalone/apps/web/.next/server/chunks/ssr/0fuv_@swc_helpers_cjs__interop_require_default_cjs_0ghzfn9._.js +3 -0
  59. package/.next/standalone/apps/web/.next/server/chunks/ssr/[root-of-the-server]__0bit3~x._.js +3 -0
  60. package/.next/standalone/apps/web/.next/server/chunks/ssr/{[root-of-the-server]__06b81~v._.js → [root-of-the-server]__0giwc4b._.js} +2 -2
  61. package/.next/standalone/apps/web/.next/server/chunks/ssr/{apps_web_0b_ykcu._.js → _0m1v4-9._.js} +2 -2
  62. package/.next/standalone/apps/web/.next/server/chunks/ssr/_0oc3qg_._.js +3 -3
  63. package/.next/standalone/apps/web/.next/server/chunks/ssr/{apps_web_08kf15u._.js → apps_web_0758ax4._.js} +2 -2
  64. package/.next/standalone/apps/web/.next/server/middleware-build-manifest.js +3 -3
  65. package/.next/standalone/apps/web/.next/server/pages/404.html +1 -1
  66. package/.next/standalone/apps/web/.next/server/pages/500.html +1 -1
  67. package/.next/standalone/apps/web/.next/server/server-reference-manifest.js +1 -1
  68. package/.next/standalone/apps/web/.next/server/server-reference-manifest.json +1 -1
  69. package/.next/standalone/apps/web/.next/static/chunks/01f1ms~jsc5vh.js +138 -0
  70. package/.next/standalone/apps/web/.next/static/chunks/0c7yx0ttmhb4s.js +63 -0
  71. package/.next/standalone/apps/web/.next/static/chunks/0ogqv_xj2r0c6.js +1 -0
  72. package/.next/standalone/apps/web/.next/static/chunks/0qp8t.3t~v6um.js +1 -0
  73. package/.next/standalone/apps/web/.next/static/chunks/{0syypqto3~pe_.js → 0y0o261rjun_2.js} +8 -8
  74. package/.next/standalone/apps/web/.next/static/chunks/0y5z3t-z1c8ks.js.map +5 -0
  75. package/.next/standalone/apps/web/.next/static/chunks/130i667qy-j80.css +3 -0
  76. package/.next/standalone/apps/web/.next/static/chunks/15uwrard~z-l5.js +16 -0
  77. package/.next/standalone/apps/web/.next/static/chunks/17b.xoi.b6rcl.js +1 -0
  78. package/.next/standalone/apps/web/.next/static/chunks/turbopack-0_n_4n~_4no2a.js +1 -0
  79. package/.next/standalone/apps/web/.next/static/chunks/turbopack-worker-0sjn--fhq~1cg.js +1 -0
  80. package/.next/standalone/apps/web/.next/static/media/diffs.worker.09unk0quktc_5.ts +1 -0
  81. package/.next/standalone/apps/web/package.json +4 -4
  82. package/README.md +10 -3
  83. package/bin/diffhub.mjs +25 -1
  84. package/package.json +4 -4
  85. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__05vwx85._.js +0 -3
  86. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__09vmjc2._.js +0 -3
  87. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0etmu4u._.js +0 -3
  88. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0g-_a7n._.js +0 -3
  89. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0gf_xk6._.js +0 -13
  90. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0mshgfw._.js +0 -3
  91. package/.next/standalone/apps/web/.next/server/chunks/[root-of-the-server]__0qixima._.js +0 -3
  92. package/.next/standalone/apps/web/.next/server/chunks/ssr/[root-of-the-server]__0f~hmsk._.js +0 -3
  93. package/.next/standalone/apps/web/.next/server/chunks/ssr/[root-of-the-server]__0khyzju._.js +0 -3
  94. package/.next/standalone/apps/web/.next/server/chunks/ssr/[root-of-the-server]__0l2mjim._.js +0 -70
  95. package/.next/standalone/apps/web/.next/server/chunks/ssr/_0kwaklj._.js +0 -3
  96. package/.next/standalone/apps/web/.next/static/chunks/0-ci0c9di0qo8.js +0 -16
  97. package/.next/standalone/apps/web/.next/static/chunks/0.ae0sud8tm7k.js +0 -204
  98. package/.next/standalone/apps/web/.next/static/chunks/07ndp5x2cvqo..css +0 -3
  99. package/.next/standalone/apps/web/.next/static/chunks/0di~ntk7iivm4.js +0 -1
  100. package/.next/standalone/apps/web/.next/static/chunks/0pklg0nmdvay8.js +0 -1
  101. package/.next/standalone/apps/web/.next/static/chunks/0up9_7hiwl_dt.js +0 -1
  102. package/.next/standalone/apps/web/.next/static/chunks/0~984a88e4rp9.js +0 -204
  103. package/.next/standalone/apps/web/.next/static/chunks/13y8355z8m13w.js +0 -1
  104. package/.next/standalone/apps/web/AGENTS.md +0 -60
  105. package/.next/standalone/apps/web/CHANGELOG.md +0 -7
  106. package/.next/standalone/apps/web/CLAUDE.md +0 -1
  107. package/.next/standalone/apps/web/README.md +0 -78
  108. package/.next/standalone/apps/web/app/api/comments/route.ts +0 -20
  109. package/.next/standalone/apps/web/app/api/diff/route.ts +0 -15
  110. package/.next/standalone/apps/web/app/api/discard/route.ts +0 -15
  111. package/.next/standalone/apps/web/app/api/file/route.ts +0 -17
  112. package/.next/standalone/apps/web/app/api/files/route.ts +0 -14
  113. package/.next/standalone/apps/web/app/api/open/route.ts +0 -64
  114. package/.next/standalone/apps/web/app/favicon.ico +0 -0
  115. package/.next/standalone/apps/web/app/globals.css +0 -214
  116. package/.next/standalone/apps/web/app/layout.tsx +0 -52
  117. package/.next/standalone/apps/web/app/page.tsx +0 -6
  118. package/.next/standalone/apps/web/bin/diffhub.mjs +0 -147
  119. package/.next/standalone/apps/web/components/ContextMenu.tsx +0 -161
  120. package/.next/standalone/apps/web/components/DiffApp.tsx +0 -419
  121. package/.next/standalone/apps/web/components/DiffViewer.tsx +0 -565
  122. package/.next/standalone/apps/web/components/FileDiffHeader.tsx +0 -119
  123. package/.next/standalone/apps/web/components/FileList.tsx +0 -455
  124. package/.next/standalone/apps/web/components/KeyboardShortcutsDialog.tsx +0 -79
  125. package/.next/standalone/apps/web/components/SidebarHelpMenu.tsx +0 -86
  126. package/.next/standalone/apps/web/components/StatusBar.tsx +0 -212
  127. package/.next/standalone/apps/web/components/icons/file-status-icons.tsx +0 -48
  128. package/.next/standalone/apps/web/components/theme-provider.tsx +0 -12
  129. package/.next/standalone/apps/web/components/ui/button.tsx +0 -90
  130. package/.next/standalone/apps/web/components/ui/empty.tsx +0 -82
  131. package/.next/standalone/apps/web/components/ui/input.tsx +0 -18
  132. package/.next/standalone/apps/web/components/ui/kbd.tsx +0 -14
  133. package/.next/standalone/apps/web/components/ui/separator.tsx +0 -23
  134. package/.next/standalone/apps/web/components/ui/sheet.tsx +0 -109
  135. package/.next/standalone/apps/web/components/ui/sidebar.tsx +0 -700
  136. package/.next/standalone/apps/web/components/ui/skeleton.tsx +0 -9
  137. package/.next/standalone/apps/web/components/ui/toggle.tsx +0 -35
  138. package/.next/standalone/apps/web/components/ui/tooltip.tsx +0 -52
  139. package/.next/standalone/apps/web/components.json +0 -27
  140. package/.next/standalone/apps/web/lib/comments.ts +0 -52
  141. package/.next/standalone/apps/web/lib/export-comments.ts +0 -13
  142. package/.next/standalone/apps/web/lib/git.ts +0 -201
  143. package/.next/standalone/apps/web/lib/use-mobile.ts +0 -19
  144. package/.next/standalone/apps/web/lib/utils.ts +0 -5
  145. package/.next/standalone/apps/web/next.config.ts +0 -19
  146. package/.next/standalone/apps/web/oxfmt.config.ts +0 -6
  147. package/.next/standalone/apps/web/oxlint.config.ts +0 -13
  148. package/.next/standalone/apps/web/postcss.config.mjs +0 -7
  149. package/.next/standalone/apps/web/public/file.svg +0 -1
  150. package/.next/standalone/apps/web/public/glide-variable-italic.woff2 +0 -0
  151. package/.next/standalone/apps/web/public/glide-variable.woff2 +0 -0
  152. package/.next/standalone/apps/web/public/globe.svg +0 -1
  153. package/.next/standalone/apps/web/public/next.svg +0 -1
  154. package/.next/standalone/apps/web/public/operator-mono-book-italic.woff2 +0 -0
  155. package/.next/standalone/apps/web/public/operator-mono-book.woff2 +0 -0
  156. package/.next/standalone/apps/web/public/operator-mono-medium-italic.woff2 +0 -0
  157. package/.next/standalone/apps/web/public/operator-mono-medium.woff2 +0 -0
  158. package/.next/standalone/apps/web/public/vercel.svg +0 -1
  159. package/.next/standalone/apps/web/public/window.svg +0 -1
  160. package/.next/standalone/apps/web/tsconfig.json +0 -34
  161. /package/.next/standalone/apps/web/.next/static/{ZhI_-YaFho-fQoajjgwSH → C1Ggd_ITpnb7yBHrIOODV}/_buildManifest.js +0 -0
  162. /package/.next/standalone/apps/web/.next/static/{ZhI_-YaFho-fQoajjgwSH → C1Ggd_ITpnb7yBHrIOODV}/_clientMiddlewareManifest.js +0 -0
  163. /package/.next/standalone/apps/web/.next/static/{ZhI_-YaFho-fQoajjgwSH → C1Ggd_ITpnb7yBHrIOODV}/_ssgManifest.js +0 -0
@@ -1,700 +0,0 @@
1
- "use client";
2
-
3
- import { mergeProps } from "@base-ui/react/merge-props";
4
- import { useRender } from "@base-ui/react/use-render";
5
- import { PanelLeftIcon } from "blode-icons-react";
6
- import { cva } from "class-variance-authority";
7
- import type { VariantProps } from "class-variance-authority";
8
- import type * as React from "react";
9
- import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
10
-
11
- import { useIsMobile } from "@/lib/use-mobile";
12
- import { cn } from "@/lib/utils";
13
- import { Button } from "@/components/ui/button";
14
- import { Input } from "@/components/ui/input";
15
- import { Separator } from "@/components/ui/separator";
16
- import {
17
- Sheet,
18
- SheetContent,
19
- SheetDescription,
20
- SheetHeader,
21
- SheetTitle,
22
- } from "@/components/ui/sheet";
23
- import { Skeleton } from "@/components/ui/skeleton";
24
- import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
25
-
26
- const SIDEBAR_COOKIE_NAME = "sidebar_state";
27
- const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
28
- const SIDEBAR_WIDTH = "16rem";
29
- const SIDEBAR_WIDTH_MOBILE = "18rem";
30
- const SIDEBAR_WIDTH_ICON = "3rem";
31
- const SIDEBAR_KEYBOARD_SHORTCUT = "b";
32
-
33
- interface SidebarContextProps {
34
- isMobile: boolean;
35
- open: boolean;
36
- openMobile: boolean;
37
- setOpen: (open: boolean) => void;
38
- setOpenMobile: (open: boolean) => void;
39
- state: "expanded" | "collapsed";
40
- toggleSidebar: () => void;
41
- }
42
-
43
- const SidebarContext = createContext<SidebarContextProps | null>(null);
44
-
45
- const useSidebar = () => {
46
- const context = useContext(SidebarContext);
47
- if (!context) {
48
- throw new Error("useSidebar must be used within a SidebarProvider.");
49
- }
50
-
51
- return context;
52
- };
53
-
54
- const SidebarProvider = ({
55
- defaultOpen = true,
56
- open: openProp,
57
- onOpenChange: setOpenProp,
58
- className,
59
- style,
60
- children,
61
- ...props
62
- }: React.ComponentProps<"div"> & {
63
- defaultOpen?: boolean;
64
- open?: boolean;
65
- onOpenChange?: (open: boolean) => void;
66
- }) => {
67
- const isMobile = useIsMobile();
68
- const [openMobile, setOpenMobile] = useState(false);
69
-
70
- // This is the internal state of the sidebar.
71
- // We use openProp and setOpenProp for control from outside the component.
72
- const [internalOpen, setInternalOpen] = useState(defaultOpen);
73
- const open = openProp ?? internalOpen;
74
- const setOpen = useCallback(
75
- (value: boolean | ((value: boolean) => boolean)) => {
76
- const openState = typeof value === "function" ? value(open) : value;
77
- if (setOpenProp) {
78
- setOpenProp(openState);
79
- } else {
80
- setInternalOpen(openState);
81
- }
82
-
83
- // This sets the cookie to keep the sidebar state.
84
- void cookieStore.set({
85
- expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,
86
- name: SIDEBAR_COOKIE_NAME,
87
- path: "/",
88
- value: String(openState),
89
- });
90
- },
91
- [setOpenProp, open],
92
- );
93
-
94
- // Helper to toggle the sidebar.
95
- const toggleSidebar = useCallback(
96
- () => (isMobile ? setOpenMobile((prev) => !prev) : setOpen((prev) => !prev)),
97
- [isMobile, setOpen],
98
- );
99
-
100
- // Adds a keyboard shortcut to toggle the sidebar.
101
- useEffect(() => {
102
- const handleKeyDown = (event: KeyboardEvent) => {
103
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
104
- event.preventDefault();
105
- toggleSidebar();
106
- }
107
- };
108
-
109
- window.addEventListener("keydown", handleKeyDown);
110
- return () => window.removeEventListener("keydown", handleKeyDown);
111
- }, [toggleSidebar]);
112
-
113
- // We add a state so that we can do data-state="expanded" or "collapsed".
114
- // This makes it easier to style the sidebar with Tailwind classes.
115
- const state = open ? "expanded" : "collapsed";
116
-
117
- const contextValue = useMemo<SidebarContextProps>(
118
- () => ({
119
- isMobile,
120
- open,
121
- openMobile,
122
- setOpen,
123
- setOpenMobile,
124
- state,
125
- toggleSidebar,
126
- }),
127
- [state, open, setOpen, isMobile, openMobile, toggleSidebar],
128
- );
129
-
130
- return (
131
- <SidebarContext.Provider value={contextValue}>
132
- <TooltipProvider delay={0}>
133
- <div
134
- className={cn(
135
- "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
136
- className,
137
- )}
138
- data-slot="sidebar-wrapper"
139
- style={
140
- {
141
- "--sidebar-width": SIDEBAR_WIDTH,
142
- "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
143
- ...style,
144
- } as React.CSSProperties
145
- }
146
- {...props}
147
- >
148
- {children}
149
- </div>
150
- </TooltipProvider>
151
- </SidebarContext.Provider>
152
- );
153
- };
154
-
155
- const Sidebar = ({
156
- side = "left",
157
- variant = "sidebar",
158
- collapsible = "offcanvas",
159
- className,
160
- children,
161
- ...props
162
- }: React.ComponentProps<"div"> & {
163
- side?: "left" | "right";
164
- variant?: "sidebar" | "floating" | "inset";
165
- collapsible?: "offcanvas" | "icon" | "none";
166
- }) => {
167
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
168
-
169
- if (collapsible === "none") {
170
- return (
171
- <div
172
- className={cn(
173
- "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
174
- className,
175
- )}
176
- data-slot="sidebar"
177
- {...props}
178
- >
179
- {children}
180
- </div>
181
- );
182
- }
183
-
184
- if (isMobile) {
185
- return (
186
- <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>
187
- <SheetContent
188
- className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
189
- data-mobile="true"
190
- data-sidebar="sidebar"
191
- data-slot="sidebar"
192
- side={side}
193
- style={
194
- {
195
- "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
196
- } as React.CSSProperties
197
- }
198
- >
199
- <SheetHeader className="sr-only">
200
- <SheetTitle>Sidebar</SheetTitle>
201
- <SheetDescription>Displays the mobile sidebar.</SheetDescription>
202
- </SheetHeader>
203
- <div className="flex h-full w-full flex-col">{children}</div>
204
- </SheetContent>
205
- </Sheet>
206
- );
207
- }
208
-
209
- return (
210
- <div
211
- className="group peer hidden text-sidebar-foreground md:block"
212
- data-collapsible={state === "collapsed" ? collapsible : ""}
213
- data-side={side}
214
- data-slot="sidebar"
215
- data-state={state}
216
- data-variant={variant}
217
- >
218
- {/* This is what handles the sidebar gap on desktop */}
219
- <div
220
- className={cn(
221
- "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
222
- "group-data-[collapsible=offcanvas]:w-0",
223
- "group-data-[side=right]:rotate-180",
224
- variant === "floating" || variant === "inset"
225
- ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
226
- : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
227
- )}
228
- data-slot="sidebar-gap"
229
- />
230
- <div
231
- className={cn(
232
- "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
233
- side === "left"
234
- ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
235
- : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
236
- // Adjust the padding for floating and inset variants.
237
- variant === "floating" || variant === "inset"
238
- ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
239
- : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
240
- className,
241
- )}
242
- data-slot="sidebar-container"
243
- {...props}
244
- >
245
- <div
246
- className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
247
- data-sidebar="sidebar"
248
- data-slot="sidebar-inner"
249
- >
250
- {children}
251
- </div>
252
- </div>
253
- </div>
254
- );
255
- };
256
-
257
- const SidebarTrigger = ({ className, onClick, ...props }: React.ComponentProps<typeof Button>) => {
258
- const { toggleSidebar } = useSidebar();
259
-
260
- const handleClick = useCallback(
261
- (event: React.MouseEvent<HTMLButtonElement>) => {
262
- onClick?.(event);
263
- toggleSidebar();
264
- },
265
- [onClick, toggleSidebar],
266
- );
267
-
268
- return (
269
- <Button
270
- className={cn("size-7", className)}
271
- data-sidebar="trigger"
272
- data-slot="sidebar-trigger"
273
- onClick={handleClick}
274
- size="icon"
275
- variant="ghost"
276
- {...props}
277
- >
278
- <PanelLeftIcon />
279
- <span className="sr-only">Toggle Sidebar</span>
280
- </Button>
281
- );
282
- };
283
-
284
- const SidebarRail = ({ className, ...props }: React.ComponentProps<"button">) => {
285
- const { toggleSidebar } = useSidebar();
286
-
287
- return (
288
- <button
289
- aria-label="Toggle Sidebar"
290
- className={cn(
291
- "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
292
- "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
293
- "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
294
- "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
295
- "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
296
- "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
297
- className,
298
- )}
299
- data-sidebar="rail"
300
- data-slot="sidebar-rail"
301
- onClick={toggleSidebar}
302
- tabIndex={-1}
303
- title="Toggle Sidebar"
304
- type="button"
305
- {...props}
306
- />
307
- );
308
- };
309
-
310
- const SidebarInset = ({ className, ...props }: React.ComponentProps<"main">) => (
311
- <main
312
- className={cn(
313
- "relative flex w-full flex-1 flex-col bg-background",
314
- "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
315
- className,
316
- )}
317
- data-slot="sidebar-inset"
318
- {...props}
319
- />
320
- );
321
-
322
- const SidebarInput = ({ className, ...props }: React.ComponentProps<typeof Input>) => (
323
- <Input
324
- className={cn("h-8 w-full bg-background shadow-none", className)}
325
- data-sidebar="input"
326
- data-slot="sidebar-input"
327
- {...props}
328
- />
329
- );
330
-
331
- const SidebarHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
332
- <div
333
- className={cn("flex flex-col gap-2 p-2", className)}
334
- data-sidebar="header"
335
- data-slot="sidebar-header"
336
- {...props}
337
- />
338
- );
339
-
340
- const SidebarFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
341
- <div
342
- className={cn("flex flex-col gap-2 p-2", className)}
343
- data-sidebar="footer"
344
- data-slot="sidebar-footer"
345
- {...props}
346
- />
347
- );
348
-
349
- const SidebarSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => (
350
- <Separator
351
- className={cn("mx-2 w-auto bg-sidebar-border", className)}
352
- data-sidebar="separator"
353
- data-slot="sidebar-separator"
354
- {...props}
355
- />
356
- );
357
-
358
- const SidebarContent = ({ className, ...props }: React.ComponentProps<"div">) => (
359
- <div
360
- className={cn(
361
- "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
362
- className,
363
- )}
364
- data-sidebar="content"
365
- data-slot="sidebar-content"
366
- {...props}
367
- />
368
- );
369
-
370
- const SidebarGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
371
- <div
372
- className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
373
- data-sidebar="group"
374
- data-slot="sidebar-group"
375
- {...props}
376
- />
377
- );
378
-
379
- const SidebarGroupLabel = ({
380
- className,
381
- asChild = false,
382
- children,
383
- ...props
384
- }: React.ComponentProps<"div"> & { asChild?: boolean }) =>
385
- useRender({
386
- defaultTagName: "div",
387
- props: mergeProps<"div">(
388
- {
389
- className: cn(
390
- "flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
391
- "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
392
- className,
393
- ),
394
- },
395
- asChild ? props : { ...props, children },
396
- ),
397
- render: asChild ? (children as React.ReactElement) : undefined,
398
- state: {
399
- sidebar: "group-label",
400
- slot: "sidebar-group-label",
401
- },
402
- });
403
-
404
- const SidebarGroupAction = ({
405
- className,
406
- asChild = false,
407
- children,
408
- ...props
409
- }: React.ComponentProps<"button"> & { asChild?: boolean }) =>
410
- useRender({
411
- defaultTagName: "button",
412
- props: mergeProps<"button">(
413
- {
414
- className: cn(
415
- "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
416
- // Increases the hit area of the button on mobile.
417
- "after:absolute after:-inset-2 md:after:hidden",
418
- "group-data-[collapsible=icon]:hidden",
419
- className,
420
- ),
421
- },
422
- asChild ? props : { ...props, children },
423
- ),
424
- render: asChild ? (children as React.ReactElement) : undefined,
425
- state: {
426
- sidebar: "group-action",
427
- slot: "sidebar-group-action",
428
- },
429
- });
430
-
431
- const SidebarGroupContent = ({ className, ...props }: React.ComponentProps<"div">) => (
432
- <div
433
- className={cn("w-full text-sm", className)}
434
- data-sidebar="group-content"
435
- data-slot="sidebar-group-content"
436
- {...props}
437
- />
438
- );
439
-
440
- const SidebarMenu = ({ className, ...props }: React.ComponentProps<"ul">) => (
441
- <ul
442
- className={cn("flex w-full min-w-0 flex-col gap-1", className)}
443
- data-sidebar="menu"
444
- data-slot="sidebar-menu"
445
- {...props}
446
- />
447
- );
448
-
449
- const SidebarMenuItem = ({ className, ...props }: React.ComponentProps<"li">) => (
450
- <li
451
- className={cn("group/menu-item relative", className)}
452
- data-sidebar="menu-item"
453
- data-slot="sidebar-menu-item"
454
- {...props}
455
- />
456
- );
457
-
458
- const sidebarMenuButtonVariants = cva(
459
- "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active]:bg-sidebar-accent data-[active]:font-medium data-[active]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
460
- {
461
- defaultVariants: {
462
- size: "default",
463
- variant: "default",
464
- },
465
- variants: {
466
- size: {
467
- default: "h-8 text-sm",
468
- lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
469
- sm: "h-7 text-xs",
470
- },
471
- variant: {
472
- default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
473
- outline:
474
- "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
475
- },
476
- },
477
- },
478
- );
479
-
480
- const SidebarMenuButton = ({
481
- asChild = false,
482
- isActive = false,
483
- variant = "default",
484
- size = "default",
485
- tooltip,
486
- className,
487
- children,
488
- ...props
489
- }: React.ComponentProps<"button"> & {
490
- asChild?: boolean;
491
- isActive?: boolean;
492
- tooltip?: string | React.ComponentProps<typeof TooltipContent>;
493
- } & VariantProps<typeof sidebarMenuButtonVariants>) => {
494
- const { isMobile, state } = useSidebar();
495
-
496
- const button = useRender({
497
- defaultTagName: "button",
498
- props: mergeProps<"button">(
499
- {
500
- className: cn(sidebarMenuButtonVariants({ size, variant }), className),
501
- },
502
- asChild ? props : { ...props, children },
503
- ),
504
- render: asChild ? (children as React.ReactElement) : undefined,
505
- state: {
506
- active: isActive,
507
- sidebar: "menu-button",
508
- size,
509
- slot: "sidebar-menu-button",
510
- },
511
- });
512
-
513
- if (!tooltip) {
514
- return button;
515
- }
516
-
517
- const tooltipProps: React.ComponentProps<typeof TooltipContent> =
518
- typeof tooltip === "string" ? { children: tooltip } : tooltip;
519
-
520
- return (
521
- <Tooltip>
522
- <TooltipTrigger>{button}</TooltipTrigger>
523
- <TooltipContent
524
- align="center"
525
- hidden={state !== "collapsed" || isMobile}
526
- side="right"
527
- {...tooltipProps}
528
- />
529
- </Tooltip>
530
- );
531
- };
532
-
533
- const SidebarMenuAction = ({
534
- className,
535
- asChild = false,
536
- showOnHover = false,
537
- children,
538
- ...props
539
- }: React.ComponentProps<"button"> & {
540
- asChild?: boolean;
541
- showOnHover?: boolean;
542
- }) =>
543
- useRender({
544
- defaultTagName: "button",
545
- props: mergeProps<"button">(
546
- {
547
- className: cn(
548
- "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
549
- // Increases the hit area of the button on mobile.
550
- "after:absolute after:-inset-2 md:after:hidden",
551
- "peer-data-[size=sm]/menu-button:top-1",
552
- "peer-data-[size=default]/menu-button:top-1.5",
553
- "peer-data-[size=lg]/menu-button:top-2.5",
554
- "group-data-[collapsible=icon]:hidden",
555
- showOnHover &&
556
- "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active]/menu-button:text-sidebar-accent-foreground md:opacity-0",
557
- className,
558
- ),
559
- },
560
- asChild ? props : { ...props, children },
561
- ),
562
- render: asChild ? (children as React.ReactElement) : undefined,
563
- state: {
564
- sidebar: "menu-action",
565
- slot: "sidebar-menu-action",
566
- },
567
- });
568
-
569
- const SidebarMenuBadge = ({ className, ...props }: React.ComponentProps<"div">) => (
570
- <div
571
- className={cn(
572
- "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
573
- "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active]/menu-button:text-sidebar-accent-foreground",
574
- "peer-data-[size=sm]/menu-button:top-1",
575
- "peer-data-[size=default]/menu-button:top-1.5",
576
- "peer-data-[size=lg]/menu-button:top-2.5",
577
- "group-data-[collapsible=icon]:hidden",
578
- className,
579
- )}
580
- data-sidebar="menu-badge"
581
- data-slot="sidebar-menu-badge"
582
- {...props}
583
- />
584
- );
585
-
586
- const SidebarMenuSkeleton = ({
587
- className,
588
- showIcon = false,
589
- ...props
590
- }: React.ComponentProps<"div"> & {
591
- showIcon?: boolean;
592
- }) => {
593
- // Random width between 50 to 90%.
594
- const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
595
-
596
- return (
597
- <div
598
- className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
599
- data-sidebar="menu-skeleton"
600
- data-slot="sidebar-menu-skeleton"
601
- {...props}
602
- >
603
- {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
604
- <Skeleton
605
- className="h-4 max-w-(--skeleton-width) flex-1"
606
- data-sidebar="menu-skeleton-text"
607
- style={
608
- {
609
- "--skeleton-width": width,
610
- } as React.CSSProperties
611
- }
612
- />
613
- </div>
614
- );
615
- };
616
-
617
- const SidebarMenuSub = ({ className, ...props }: React.ComponentProps<"ul">) => (
618
- <ul
619
- className={cn(
620
- "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5",
621
- "group-data-[collapsible=icon]:hidden",
622
- className,
623
- )}
624
- data-sidebar="menu-sub"
625
- data-slot="sidebar-menu-sub"
626
- {...props}
627
- />
628
- );
629
-
630
- const SidebarMenuSubItem = ({ className, ...props }: React.ComponentProps<"li">) => (
631
- <li
632
- className={cn("group/menu-sub-item relative", className)}
633
- data-sidebar="menu-sub-item"
634
- data-slot="sidebar-menu-sub-item"
635
- {...props}
636
- />
637
- );
638
-
639
- const SidebarMenuSubButton = ({
640
- asChild = false,
641
- size = "md",
642
- isActive = false,
643
- className,
644
- children,
645
- ...props
646
- }: React.ComponentProps<"a"> & {
647
- asChild?: boolean;
648
- size?: "sm" | "md";
649
- isActive?: boolean;
650
- }) =>
651
- useRender({
652
- defaultTagName: "a",
653
- props: mergeProps<"a">(
654
- {
655
- className: cn(
656
- "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
657
- "data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground",
658
- size === "sm" && "text-xs",
659
- size === "md" && "text-sm",
660
- "group-data-[collapsible=icon]:hidden",
661
- className,
662
- ),
663
- },
664
- asChild ? props : { ...props, children },
665
- ),
666
- render: asChild ? (children as React.ReactElement) : undefined,
667
- state: {
668
- active: isActive,
669
- sidebar: "menu-sub-button",
670
- size,
671
- slot: "sidebar-menu-sub-button",
672
- },
673
- });
674
-
675
- export {
676
- Sidebar,
677
- SidebarContent,
678
- SidebarFooter,
679
- SidebarGroup,
680
- SidebarGroupAction,
681
- SidebarGroupContent,
682
- SidebarGroupLabel,
683
- SidebarHeader,
684
- SidebarInput,
685
- SidebarInset,
686
- SidebarMenu,
687
- SidebarMenuAction,
688
- SidebarMenuBadge,
689
- SidebarMenuButton,
690
- SidebarMenuItem,
691
- SidebarMenuSkeleton,
692
- SidebarMenuSub,
693
- SidebarMenuSubButton,
694
- SidebarMenuSubItem,
695
- SidebarProvider,
696
- SidebarRail,
697
- SidebarSeparator,
698
- SidebarTrigger,
699
- useSidebar,
700
- };
@@ -1,9 +0,0 @@
1
- import { cn } from "@/lib/utils";
2
-
3
- export const Skeleton = ({ className, ...props }: React.ComponentProps<"div">) => (
4
- <div
5
- data-slot="skeleton"
6
- className={cn("animate-pulse rounded-md bg-muted", className)}
7
- {...props}
8
- />
9
- );