diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 7b69f17e4..5218f989f 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from "next" +import type { Metadata, Viewport } from "next" import { Space_Grotesk } from "next/font/google" import "../globals.css" import "@ui/globals.css" @@ -34,6 +34,12 @@ export const metadata: Metadata = { title: "supermemory app", } +export const viewport: Viewport = { + width: "device-width", + initialScale: 1, + viewportFit: "cover", +} + export default function RootLayout({ children, }: Readonly<{ diff --git a/apps/web/components/add-document/connections.tsx b/apps/web/components/add-document/connections.tsx index 4c455c63f..7aa0250d5 100644 --- a/apps/web/components/add-document/connections.tsx +++ b/apps/web/components/add-document/connections.tsx @@ -34,6 +34,7 @@ import { import { RemoveConnectionDialog } from "@/components/remove-connection-dialog" import { SyncStatusBadge } from "@/components/settings/sync-status-badge" import { SyncHistoryPanel } from "@/components/settings/sync-history-panel" +import { useConnectionHealth } from "@/hooks/use-connection-health" import { useTriggerSync } from "@/hooks/use-trigger-sync" import { formatRelativeTime } from "@/components/settings/sync-utils" import type { ImportProvider } from "@/components/settings/sync-utils" @@ -89,11 +90,6 @@ function getConnectionMeta(connection: Connection) { } } -/** Check if a connection's auth token has expired. */ -function isConnectionExpired(connection: Connection): boolean { - return !!connection.expiresAt && new Date(connection.expiresAt) <= new Date() -} - function ConnectionRow({ connection, onDelete, @@ -101,6 +97,8 @@ function ConnectionRow({ projects, onTriggerSync, isSyncing, + onReconnect, + isReconnecting, }: { connection: Connection onDelete: () => void @@ -108,14 +106,17 @@ function ConnectionRow({ projects: Project[] onTriggerSync: () => void isSyncing: boolean + onReconnect: () => void + isReconnecting: boolean }) { const [historyOpen, setHistoryOpen] = useState(false) const config = CONNECTORS[connection.provider as ConnectorProvider] + const { needsReauth } = useConnectionHealth(connection.id) if (!config) return null const Icon = config.icon const meta = getConnectionMeta(connection) - const expired = isConnectionExpired(connection) + const expired = needsReauth const getProjectName = (tag: string): string => { if (tag === DEFAULT_PROJECT_ID) return "Default" @@ -137,14 +138,14 @@ function ConnectionRow({ )} >
-
+
-
-
+
+
{config.title} @@ -156,41 +157,54 @@ function ConnectionRow({ />
{connection.email || "Unknown"}
-
- +
+ {expired ? ( + + ) : ( + + )}
diff --git a/apps/web/components/add-document/file.tsx b/apps/web/components/add-document/file.tsx index b9212bc30..92e56751b 100644 --- a/apps/web/components/add-document/file.tsx +++ b/apps/web/components/add-document/file.tsx @@ -187,7 +187,12 @@ export function FileContent({ const hasItems = data.items.length > 0 return ( -
+

Upload files (images, PDF, documents, sheets, markdown) diff --git a/apps/web/components/add-document/index.tsx b/apps/web/components/add-document/index.tsx index fe74f61af..cc308f906 100644 --- a/apps/web/components/add-document/index.tsx +++ b/apps/web/components/add-document/index.tsx @@ -3,9 +3,10 @@ import { useState, useEffect, useCallback, useRef } from "react" import { useQueryState } from "nuqs" import { Dialog, DialogContent, DialogTitle } from "@repo/ui/components/dialog" +import { Drawer, DrawerContent, DrawerTitle } from "@repo/ui/components/drawer" import { cn } from "@lib/utils" import { dmSansClassName } from "@/lib/fonts" -import { FileTextIcon, GlobeIcon, ZapIcon, Loader2, XIcon } from "lucide-react" +import { FileTextIcon, GlobeIcon, ZapIcon, Loader2 } from "lucide-react" import { Button } from "@ui/components/button" import { ConnectContent } from "./connections" import { NoteContent } from "./note" @@ -31,14 +32,36 @@ interface AddDocumentModalProps { export function AddDocumentModal({ isOpen, onClose }: AddDocumentModalProps) { const isMobile = useIsMobile() + if (isMobile) { + return ( + !open && onClose()} + shouldScaleBackground + > + div:first-child]:bg-[#3A4252] [&>div:first-child]:h-1 [&>div:first-child]:w-9 [&>div:first-child]:mt-2.5 [&>div:first-child]:mb-1", + dmSansClassName(), + )} + > + Add Document +

+ +
+ + + ) + } + return ( !open && onClose()}> { if (!isOpen) { setFileData({ items: [], title: "", description: "" }) + setNoteContent("") + setLinkData({ url: "", title: "", description: "" }) } }, [isOpen]) @@ -257,112 +286,56 @@ export function AddDocument({ return (
-
- {isMobile && ( -
-
-

- Add memory -

-

- Save something to recall later -

-
- -
- )} -
- {tabs.map((tab) => ( - setActiveTab(tab.id)} - icon={tab.icon} - title={tab.title} - description={tab.description} - isPro={tab.isPro} - compact={isMobile} - /> - ))} + {isMobile && !hasPaidPlan && ( +
+
- - {isMobile && ( -
-
- - Plan usage - - - {isLoadingUsage - ? "…" - : `${planUsagePct < 1 && planUsagePct > 0 ? "< 1" : Math.round(planUsagePct)}% used`} - -
-
-
80 - ? "#ef4444" - : hasPaidPlan - ? "linear-gradient(to right, #4BA0FA 80%, #002757 100%)" - : "#0054AD", - }} - title={`${formatUsageNumber(tokensUsed)} tokens · ${formatUsageNumber(searchesUsed)} queries`} + )} + {!isMobile && ( +
+
+ {tabs.map((tab) => ( + setActiveTab(tab.id)} + icon={tab.icon} + title={tab.title} + compactLabel={tab.compactLabel} + description={tab.description} + isPro={tab.isPro} /> -
- {!isLoadingUsage && ( -

- {formatUsageNumber(tokensUsed)} tokens ·{" "} - {formatUsageNumber(searchesUsed)} queries -

- )} + ))}
- )} - {!isMobile && (
@@ -463,13 +436,13 @@ export function AddDocument({ )}
- )} -
+
+ )}
@@ -479,6 +452,7 @@ export function AddDocument({ onContentChange={handleNoteContentChange} isSubmitting={noteMutation.isPending} isOpen={isOpen} + initialContent={noteContent} /> )} {activeTab === "link" && ( @@ -487,6 +461,7 @@ export function AddDocument({ onDataChange={handleLinkDataChange} isSubmitting={linkMutation.isPending} isOpen={isOpen} + initialData={linkData} /> )} {activeTab === "file" && ( @@ -506,12 +481,29 @@ export function AddDocument({
+ {isMobile && ( +
+ {tabs.map((tab) => ( + setActiveTab(tab.id)} + icon={tab.icon} + title={tab.title} + compactLabel={tab.compactLabel} + description={tab.description} + isPro={tab.isPro} + compact + /> + ))} +
+ )} {!isMobile && ( - + {!isMobile && ( + + )} {activeTab !== "connect" && ( ) diff --git a/apps/web/components/add-document/link.tsx b/apps/web/components/add-document/link.tsx index 93e8821a8..f2c7bc169 100644 --- a/apps/web/components/add-document/link.tsx +++ b/apps/web/components/add-document/link.tsx @@ -20,6 +20,7 @@ interface LinkContentProps { onDataChange?: (data: LinkData) => void isSubmitting?: boolean isOpen?: boolean + initialData?: LinkData } export function LinkContent({ @@ -27,11 +28,12 @@ export function LinkContent({ onDataChange, isSubmitting, isOpen, + initialData, }: LinkContentProps) { - const [url, setUrl] = useState("") - const [title, setTitle] = useState("") - const [description, setDescription] = useState("") - const [image, setImage] = useState(undefined) + const [url, setUrl] = useState(initialData?.url ?? "") + const [title, setTitle] = useState(initialData?.title ?? "") + const [description, setDescription] = useState(initialData?.description ?? "") + const [image, setImage] = useState(initialData?.image) const [isPreviewLoading, setIsPreviewLoading] = useState(false) const canSubmit = url.trim().length > 0 && !isSubmitting @@ -148,7 +150,12 @@ export function LinkContent({ }, [isOpen, onDataChange]) return ( -
+

void isSubmitting?: boolean isOpen?: boolean + initialContent?: string } export function NoteContent({ onSubmit, onContentChange, isSubmitting, - isOpen, + initialContent, }: NoteContentProps) { - const [content, setContent] = useState("") + const [content, setContent] = useState(initialContent ?? "") + const [seededContent] = useState(initialContent || undefined) const canSubmit = content.trim().length > 0 && !isSubmitting @@ -31,18 +33,10 @@ export function NoteContent({ onContentChange?.(newContent) } - // Reset content when modal closes - useEffect(() => { - if (!isOpen) { - setContent("") - onContentChange?.("") - } - }, [isOpen, onContentChange]) - return (

button]:text-[#FAFAFA]", dmSansClassName(), )} @@ -1185,10 +1185,10 @@ export function ChatSidebar({ className={cn( "relative flex flex-col backdrop-blur-md", isMobile - ? "fixed inset-0 z-50 m-0 h-dvh w-full rounded-none" + ? "fixed inset-0 z-50 m-0 h-dvh w-full rounded-none pb-safe" : isPageDesktop ? "flex h-full min-h-0 w-full min-w-0 flex-1 flex-col basis-0 rounded-none border-x-0" - : "m-4 mt-2 w-[450px] rounded-2xl", + : "m-4 mt-2 w-[min(450px,calc(100vw-2rem))] md:w-[380px] lg:w-[450px] rounded-2xl", dmSansClassName(), )} style={ @@ -1226,9 +1226,9 @@ export function ChatSidebar({ chatProject === AUTO_CHAT_SPACE_ID ? null : [chatProject] } /> -
+
{pageDesktopToolbarRow} -
+
{shell}
diff --git a/apps/web/components/chat/input/index.tsx b/apps/web/components/chat/input/index.tsx index 1c66e7aa2..d24276d09 100644 --- a/apps/web/components/chat/input/index.tsx +++ b/apps/web/components/chat/input/index.tsx @@ -89,7 +89,7 @@ export default function ChatInput({ className={cn( "absolute bottom-full left-0 right-0 overflow-hidden transition-all duration-300 ease-out bg-[#000B1B]", isExpanded - ? "max-h-[60vh] opacity-100 overflow-y-auto pt-1.5 pb-2 rounded-t-xl px-4" + ? "max-h-[min(60dvh,420px)] opacity-100 overflow-y-auto pt-1.5 pb-2 rounded-t-xl px-4" : "max-h-0 opacity-0", )} style={{ diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx index ed8f6a11f..3c1706e49 100644 --- a/apps/web/components/header.tsx +++ b/apps/web/components/header.tsx @@ -173,7 +173,7 @@ export function Header({ onAddMemory, onOpenSearch }: HeaderProps) { role="tablist" aria-label="Content" aria-orientation="horizontal" - className="text-muted-foreground z-10! inline-flex h-10 w-fit min-w-0 max-w-full items-center justify-center gap-0.5 overflow-x-auto rounded-full border border-[#161F2C] bg-muted p-1 [scrollbar-width:thin]" + className="text-muted-foreground z-10! inline-flex h-10 w-fit min-w-0 max-w-full items-center justify-center gap-0.5 overflow-x-auto snap-x snap-mandatory scroll-fade-x rounded-full border border-[#161F2C] bg-muted p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" > {( [ @@ -210,7 +210,7 @@ export function Header({ onAddMemory, onOpenSearch }: HeaderProps) { } onClick={() => void setViewMode(mode)} className={cn( - "inline-flex h-[calc(100%-1px)] min-h-0 cursor-pointer items-center justify-center gap-1 rounded-full border border-transparent px-2.5 text-xs font-medium whitespace-nowrap transition-colors sm:gap-1.5 sm:px-3 sm:text-sm", + "inline-flex h-[calc(100%-1px)] min-h-0 cursor-pointer snap-start items-center justify-center gap-1 rounded-full border border-transparent px-2.5 text-xs font-medium whitespace-nowrap transition-colors sm:gap-1.5 sm:px-3 sm:text-sm", ( mode === "integrations" ? [ diff --git a/apps/web/components/nova/nova-empty-state.tsx b/apps/web/components/nova/nova-empty-state.tsx index d336f5f36..46a79e601 100644 --- a/apps/web/components/nova/nova-empty-state.tsx +++ b/apps/web/components/nova/nova-empty-state.tsx @@ -39,7 +39,7 @@ export function NovaEmptyState({ return (
@@ -119,7 +119,7 @@ export function NovaEmptyState({ )} -
+
- + {expired ? ( + + ) : ( + + )}
diff --git a/apps/web/components/settings/sync-status-badge.tsx b/apps/web/components/settings/sync-status-badge.tsx index c4d64aa50..2959908e7 100644 --- a/apps/web/components/settings/sync-status-badge.tsx +++ b/apps/web/components/settings/sync-status-badge.tsx @@ -77,7 +77,7 @@ export function SyncStatusBadge({ "font-medium text-[13px] tracking-[-0.13px] text-[#EF4444]", )} > - Disconnected + Needs reauth )} {status === "idle" && ( diff --git a/apps/web/globals.css b/apps/web/globals.css index 8c0087250..dfb816160 100644 --- a/apps/web/globals.css +++ b/apps/web/globals.css @@ -81,6 +81,44 @@ display: none; } +.pb-safe { + padding-bottom: max(0px, env(safe-area-inset-bottom)); +} + +.pt-safe { + padding-top: max(0px, env(safe-area-inset-top)); +} + +.pl-safe { + padding-left: max(0px, env(safe-area-inset-left)); +} + +.pr-safe { + padding-right: max(0px, env(safe-area-inset-right)); +} + +.bottom-safe-5 { + bottom: max(1.25rem, env(safe-area-inset-bottom)); +} + +/* hide scrollbar but keep edge-fade affordance for horizontal nav */ +.scroll-fade-x { + -webkit-mask-image: linear-gradient( + to right, + transparent 0, + #000 12px, + #000 calc(100% - 12px), + transparent 100% + ); + mask-image: linear-gradient( + to right, + transparent 0, + #000 12px, + #000 calc(100% - 12px), + transparent 100% + ); +} + .sm-tweet-theme .react-tweet-theme { --tweet-container-margin: 0px; font-size: inherit !important; diff --git a/apps/web/hooks/use-connection-health.ts b/apps/web/hooks/use-connection-health.ts new file mode 100644 index 000000000..f23892f5b --- /dev/null +++ b/apps/web/hooks/use-connection-health.ts @@ -0,0 +1,29 @@ +"use client" + +import { useSyncRuns, type SyncRun } from "@/hooks/use-sync-runs" + +// TODO: replace string matching with a discriminated `errorKind` from the backend. +// 403 alone matches per-file ACL denials; 401 alone matches transient retries. +// Require the status code to co-occur with explicit auth/token/grant context. +const AUTH_ERROR_PATTERNS = [ + /invalid[_\s-]?grant/i, + /unauthorized[_\s-]?client/i, + /\bunauthenticated\b/i, + /needs?[_\s-]?reauth/i, + /no\s+refresh[_\s-]?token/i, + /(?:access|refresh)[_\s-]?token[^\n]{0,40}(?:expired|revoked|invalid|missing)/i, + /\b(?:401|403)\b[^\n]{0,80}(?:auth|token|grant|credentials?)/i, + /(?:auth|token|grant|credentials?)[^\n]{0,80}\b(?:401|403)\b/i, +] + +function isAuthFailure(run: SyncRun): boolean { + if (run.status !== "failed" || !run.error) return false + return AUTH_ERROR_PATTERNS.some((p) => p.test(run.error ?? "")) +} + +export function useConnectionHealth(connectionId: string) { + const { data: runs, isLoading } = useSyncRuns(connectionId) + const latest = runs?.[0] ?? null + const needsReauth = !!latest && isAuthFailure(latest) + return { needsReauth, latestRun: latest, isLoading } +} diff --git a/apps/web/hooks/use-sync-runs.ts b/apps/web/hooks/use-sync-runs.ts index 664587abc..449c2c852 100644 --- a/apps/web/hooks/use-sync-runs.ts +++ b/apps/web/hooks/use-sync-runs.ts @@ -34,7 +34,6 @@ export function useSyncRuns(connectionId: string) { }, enabled: !!connectionId, staleTime: 30 * 1000, - refetchOnMount: "always", refetchInterval: (query) => { const runs = query.state.data as SyncRun[] | undefined if (runs?.some((r) => r.status === "running")) { diff --git a/packages/ui/assets/Logo.tsx b/packages/ui/assets/Logo.tsx index 6741acf9e..c6413ad2f 100644 --- a/packages/ui/assets/Logo.tsx +++ b/packages/ui/assets/Logo.tsx @@ -2,8 +2,8 @@ export const Logo = ({ className, id, }: { - className?: string; - id?: string; + className?: string + id?: string }) => { return ( - ); -}; + ) +} export const LogoFull = ({ className, id, }: { - className?: string; - id?: string; + className?: string + id?: string }) => { return ( - ); -}; + ) +} export const GradientLogo = ({ className = "" }: { className?: string }) => { return ( @@ -106,8 +106,8 @@ export const GradientLogo = ({ className = "" }: { className?: string }) => { - ); -}; + ) +} export const LogoBgGradient = ({ className = "" }: { className?: string }) => { return ( @@ -311,5 +311,5 @@ export const LogoBgGradient = ({ className = "" }: { className?: string }) => { - ); -}; + ) +} diff --git a/packages/ui/assets/icons.tsx b/packages/ui/assets/icons.tsx index c2ae59fcc..9c30d2e3e 100644 --- a/packages/ui/assets/icons.tsx +++ b/packages/ui/assets/icons.tsx @@ -22,7 +22,7 @@ export const OneDrive = ({ className }: { className?: string }) => ( fill="#28A8EA" /> -); +) export const GoogleDrive = ({ className }: { className?: string }) => ( ( fill="#FFBA00" /> -); +) export const Notion = ({ className }: { className?: string }) => ( ( /> -); +) export const GoogleDocs = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const GoogleSheets = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const GoogleSlides = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const NotionDoc = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const MicrosoftWord = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const MicrosoftExcel = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const MicrosoftPowerpoint = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const MicrosoftOneNote = ({ className }: { className?: string }) => ( ( fill="currentColor" /> -); +) export const PDF = ({ className }: { className?: string }) => ( ( fill="#DC2626" /> -); +) export const SyncLogoIcon = ({ className }: { className?: string }) => { return ( @@ -258,8 +258,8 @@ export const SyncLogoIcon = ({ className }: { className?: string }) => { - ); -}; + ) +} export const MCPIcon = ({ className }: { className?: string }) => { return ( @@ -323,8 +323,8 @@ export const MCPIcon = ({ className }: { className?: string }) => { - ); -}; + ) +} export const ClaudeDesktopIcon = ({ className }: { className?: string }) => { return ( @@ -360,5 +360,5 @@ export const ClaudeDesktopIcon = ({ className }: { className?: string }) => { /> - ); -}; + ) +} diff --git a/packages/ui/button/external-auth.tsx b/packages/ui/button/external-auth.tsx index 4696ecbfa..c496ddcd9 100644 --- a/packages/ui/button/external-auth.tsx +++ b/packages/ui/button/external-auth.tsx @@ -1,11 +1,11 @@ -import { cn } from "@lib/utils"; -import { Button } from "@ui/components/button"; +import { cn } from "@lib/utils" +import { Button } from "@ui/components/button" export type ExternalAuthButtonProps = React.ComponentProps<"button"> & React.ComponentProps & { - authProvider: string; - authIcon: React.ReactNode; - }; + authProvider: string + authIcon: React.ReactNode + } export function ExternalAuthButton({ authProvider, @@ -34,5 +34,5 @@ export function ExternalAuthButton({ Continue with {authProvider} - ); + ) } diff --git a/packages/ui/components/accordion.tsx b/packages/ui/components/accordion.tsx index 0a5ef2b89..1a33121ed 100644 --- a/packages/ui/components/accordion.tsx +++ b/packages/ui/components/accordion.tsx @@ -1,14 +1,14 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import { ChevronDownIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDownIcon } from "lucide-react" +import type * as React from "react" function Accordion({ ...props }: React.ComponentProps) { - return ; + return } function AccordionItem({ @@ -21,7 +21,7 @@ function AccordionItem({ data-slot="accordion-item" {...props} /> - ); + ) } function AccordionTrigger({ @@ -43,7 +43,7 @@ function AccordionTrigger({ - ); + ) } function AccordionContent({ @@ -59,7 +59,7 @@ function AccordionContent({ >
{children}
- ); + ) } -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/packages/ui/components/alert-dialog.tsx b/packages/ui/components/alert-dialog.tsx index b4765eecc..619f85164 100644 --- a/packages/ui/components/alert-dialog.tsx +++ b/packages/ui/components/alert-dialog.tsx @@ -1,14 +1,14 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; -import { buttonVariants } from "@ui/components/button"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" +import { buttonVariants } from "@ui/components/button" +import type * as React from "react" function AlertDialog({ ...props }: React.ComponentProps) { - return ; + return } function AlertDialogTrigger({ @@ -16,7 +16,7 @@ function AlertDialogTrigger({ }: React.ComponentProps) { return ( - ); + ) } function AlertDialogPortal({ @@ -24,7 +24,7 @@ function AlertDialogPortal({ }: React.ComponentProps) { return ( - ); + ) } function AlertDialogOverlay({ @@ -40,7 +40,7 @@ function AlertDialogOverlay({ data-slot="alert-dialog-overlay" {...props} /> - ); + ) } function AlertDialogContent({ @@ -59,7 +59,7 @@ function AlertDialogContent({ {...props} /> - ); + ) } function AlertDialogHeader({ @@ -72,7 +72,7 @@ function AlertDialogHeader({ data-slot="alert-dialog-header" {...props} /> - ); + ) } function AlertDialogFooter({ @@ -88,7 +88,7 @@ function AlertDialogFooter({ data-slot="alert-dialog-footer" {...props} /> - ); + ) } function AlertDialogTitle({ @@ -101,7 +101,7 @@ function AlertDialogTitle({ data-slot="alert-dialog-title" {...props} /> - ); + ) } function AlertDialogDescription({ @@ -114,7 +114,7 @@ function AlertDialogDescription({ data-slot="alert-dialog-description" {...props} /> - ); + ) } function AlertDialogAction({ @@ -126,7 +126,7 @@ function AlertDialogAction({ className={cn(buttonVariants(), className)} {...props} /> - ); + ) } function AlertDialogCancel({ @@ -138,7 +138,7 @@ function AlertDialogCancel({ className={cn(buttonVariants({ variant: "outline" }), className)} {...props} /> - ); + ) } export { @@ -153,4 +153,4 @@ export { AlertDialogDescription, AlertDialogAction, AlertDialogCancel, -}; +} diff --git a/packages/ui/components/avatar.tsx b/packages/ui/components/avatar.tsx index ba7bdc547..7c94143a9 100644 --- a/packages/ui/components/avatar.tsx +++ b/packages/ui/components/avatar.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as AvatarPrimitive from "@radix-ui/react-avatar"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as AvatarPrimitive from "@radix-ui/react-avatar" +import type * as React from "react" function Avatar({ className, @@ -17,7 +17,7 @@ function Avatar({ data-slot="avatar" {...props} /> - ); + ) } function AvatarImage({ @@ -30,7 +30,7 @@ function AvatarImage({ data-slot="avatar-image" {...props} /> - ); + ) } function AvatarFallback({ @@ -46,7 +46,7 @@ function AvatarFallback({ data-slot="avatar-fallback" {...props} /> - ); + ) } -export { Avatar, AvatarImage, AvatarFallback }; +export { Avatar, AvatarImage, AvatarFallback } diff --git a/packages/ui/components/badge.tsx b/packages/ui/components/badge.tsx index 49490bf91..783281f2b 100644 --- a/packages/ui/components/badge.tsx +++ b/packages/ui/components/badge.tsx @@ -1,7 +1,7 @@ -import { cn } from "@lib/utils"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" +import type * as React from "react" const badgeVariants = cva( "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-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", @@ -22,7 +22,7 @@ const badgeVariants = cva( variant: "default", }, }, -); +) function Badge({ className, @@ -38,7 +38,7 @@ function Badge({ data-slot="badge" {...(props as any)} /> - ); + ) } return ( @@ -47,7 +47,7 @@ function Badge({ data-slot="badge" {...props} /> - ); + ) } -export { Badge, badgeVariants }; +export { Badge, badgeVariants } diff --git a/packages/ui/components/breadcrumb.tsx b/packages/ui/components/breadcrumb.tsx index a09a2f920..b901adfde 100644 --- a/packages/ui/components/breadcrumb.tsx +++ b/packages/ui/components/breadcrumb.tsx @@ -1,10 +1,10 @@ -import { cn } from "@lib/utils"; -import { Slot } from "@radix-ui/react-slot"; -import { ChevronRight, MoreHorizontal } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" +import type * as React from "react" function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { - return
- ); + ) } -const ChartLegend = RechartsPrimitive.Legend; +const ChartLegend = RechartsPrimitive.Legend function ChartLegendContent({ className, @@ -258,13 +258,13 @@ function ChartLegendContent({ nameKey, }: React.ComponentProps<"div"> & Pick & { - hideIcon?: boolean; - nameKey?: string; + hideIcon?: boolean + nameKey?: string }) { - const { config } = useChart(); + const { config } = useChart() if (!payload?.length) { - return null; + return null } return ( @@ -276,8 +276,8 @@ function ChartLegendContent({ )} > {payload.map((item) => { - const key = `${nameKey || item.dataKey || "value"}`; - const itemConfig = getPayloadConfigFromPayload(config, item, key); + const key = `${nameKey || item.dataKey || "value"}` + const itemConfig = getPayloadConfigFromPayload(config, item, key) return (
- ); + ) })}
- ); + ) } // Helper to extract item config from a payload. @@ -311,7 +311,7 @@ function getPayloadConfigFromPayload( key: string, ) { if (typeof payload !== "object" || payload === null) { - return undefined; + return undefined } const payloadPayload = @@ -319,15 +319,15 @@ function getPayloadConfigFromPayload( typeof payload.payload === "object" && payload.payload !== null ? payload.payload - : undefined; + : undefined - let configLabelKey: string = key; + let configLabelKey: string = key if ( key in payload && typeof payload[key as keyof typeof payload] === "string" ) { - configLabelKey = payload[key as keyof typeof payload] as string; + configLabelKey = payload[key as keyof typeof payload] as string } else if ( payloadPayload && key in payloadPayload && @@ -335,12 +335,12 @@ function getPayloadConfigFromPayload( ) { configLabelKey = payloadPayload[ key as keyof typeof payloadPayload - ] as string; + ] as string } return configLabelKey in config ? config[configLabelKey] - : config[key as keyof typeof config]; + : config[key as keyof typeof config] } export { @@ -350,4 +350,4 @@ export { ChartLegend, ChartLegendContent, ChartStyle, -}; +} diff --git a/packages/ui/components/checkbox.tsx b/packages/ui/components/checkbox.tsx index 064a76275..45a968f98 100644 --- a/packages/ui/components/checkbox.tsx +++ b/packages/ui/components/checkbox.tsx @@ -1,9 +1,9 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; -import { CheckIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { CheckIcon } from "lucide-react" +import type * as React from "react" function Checkbox({ className, @@ -25,7 +25,7 @@ function Checkbox({ - ); + ) } -export { Checkbox }; +export { Checkbox } diff --git a/packages/ui/components/collapsible.tsx b/packages/ui/components/collapsible.tsx index 0551ffdd8..f8de4e4c7 100644 --- a/packages/ui/components/collapsible.tsx +++ b/packages/ui/components/collapsible.tsx @@ -1,11 +1,11 @@ -"use client"; +"use client" -import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"; +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" function Collapsible({ ...props }: React.ComponentProps) { - return ; + return } function CollapsibleTrigger({ @@ -16,7 +16,7 @@ function CollapsibleTrigger({ data-slot="collapsible-trigger" {...props} /> - ); + ) } function CollapsibleContent({ @@ -27,7 +27,7 @@ function CollapsibleContent({ data-slot="collapsible-content" {...props} /> - ); + ) } -export { Collapsible, CollapsibleTrigger, CollapsibleContent }; +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/packages/ui/components/combobox.tsx b/packages/ui/components/combobox.tsx index 657e38e22..8c9f9c978 100644 --- a/packages/ui/components/combobox.tsx +++ b/packages/ui/components/combobox.tsx @@ -1,7 +1,7 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import { Button } from "@ui/components/button"; +import { cn } from "@lib/utils" +import { Button } from "@ui/components/button" import { Command, CommandEmpty, @@ -9,29 +9,25 @@ import { CommandInput, CommandItem, CommandList, -} from "@ui/components/command"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@ui/components/popover"; -import { Check, ChevronsUpDown, X } from "lucide-react"; -import * as React from "react"; +} from "@ui/components/command" +import { Popover, PopoverContent, PopoverTrigger } from "@ui/components/popover" +import { Check, ChevronsUpDown, X } from "lucide-react" +import * as React from "react" interface Option { - value: string; - label: string; + value: string + label: string } interface ComboboxProps { - options: Option[]; - onSelect: (value: string) => void; - onSubmit: (newName: string) => void; - selectedValues: string[]; - setSelectedValues: React.Dispatch>; - className?: string; - placeholder?: string; - triggerClassName?: string; + options: Option[] + onSelect: (value: string) => void + onSubmit: (newName: string) => void + selectedValues: string[] + setSelectedValues: React.Dispatch> + className?: string + placeholder?: string + triggerClassName?: string } export function Combobox({ @@ -44,38 +40,36 @@ export function Combobox({ placeholder = "Select...", triggerClassName, }: ComboboxProps) { - const [open, setOpen] = React.useState(false); - const [inputValue, setInputValue] = React.useState(""); + const [open, setOpen] = React.useState(false) + const [inputValue, setInputValue] = React.useState("") const handleSelect = (value: string) => { - onSelect(value); - setOpen(false); - setInputValue(""); - }; + onSelect(value) + setOpen(false) + setInputValue("") + } const handleCreate = () => { if (inputValue.trim()) { - onSubmit(inputValue); - setOpen(false); - setInputValue(""); + onSubmit(inputValue) + setOpen(false) + setInputValue("") } - }; + } const handleRemove = (valueToRemove: string) => { - setSelectedValues((prev) => - prev.filter((value) => value !== valueToRemove), - ); - }; + setSelectedValues((prev) => prev.filter((value) => value !== valueToRemove)) + } const filteredOptions = options.filter( (option) => !selectedValues.includes(option.value), - ); + ) const isNewValue = inputValue.trim() && !options.some( (option) => option.label.toLowerCase() === inputValue.toLowerCase(), - ); + ) return ( @@ -93,7 +87,7 @@ export function Combobox({
{selectedValues.length > 0 ? ( selectedValues.map((value) => { - const option = options.find((opt) => opt.value === value); + const option = options.find((opt) => opt.value === value) return ( { - e.stopPropagation(); - handleRemove(value); + e.stopPropagation() + handleRemove(value) }} type="button" > - ); + ) }) ) : ( {placeholder} @@ -163,5 +157,5 @@ export function Combobox({ - ); + ) } diff --git a/packages/ui/components/command.tsx b/packages/ui/components/command.tsx index 7fa7aed6b..4c04c8c30 100644 --- a/packages/ui/components/command.tsx +++ b/packages/ui/components/command.tsx @@ -1,16 +1,16 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; +import { cn } from "@lib/utils" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, -} from "@ui/components/dialog"; -import { Command as CommandPrimitive } from "cmdk"; -import { SearchIcon } from "lucide-react"; -import type * as React from "react"; +} from "@ui/components/dialog" +import { Command as CommandPrimitive } from "cmdk" +import { SearchIcon } from "lucide-react" +import type * as React from "react" function Command({ className, @@ -25,7 +25,7 @@ function Command({ data-slot="command" {...props} /> - ); + ) } function CommandDialog({ @@ -36,10 +36,10 @@ function CommandDialog({ showCloseButton = true, ...props }: React.ComponentProps & { - title?: string; - description?: string; - className?: string; - showCloseButton?: boolean; + title?: string + description?: string + className?: string + showCloseButton?: boolean }) { return ( @@ -56,7 +56,7 @@ function CommandDialog({ - ); + ) } function CommandInput({ @@ -78,7 +78,7 @@ function CommandInput({ {...props} />
- ); + ) } function CommandList({ @@ -94,7 +94,7 @@ function CommandList({ data-slot="command-list" {...props} /> - ); + ) } function CommandEmpty({ @@ -106,7 +106,7 @@ function CommandEmpty({ data-slot="command-empty" {...props} /> - ); + ) } function CommandGroup({ @@ -122,7 +122,7 @@ function CommandGroup({ data-slot="command-group" {...props} /> - ); + ) } function CommandSeparator({ @@ -135,7 +135,7 @@ function CommandSeparator({ data-slot="command-separator" {...props} /> - ); + ) } function CommandItem({ @@ -151,7 +151,7 @@ function CommandItem({ data-slot="command-item" {...props} /> - ); + ) } function CommandShortcut({ @@ -167,7 +167,7 @@ function CommandShortcut({ data-slot="command-shortcut" {...props} /> - ); + ) } export { @@ -180,4 +180,4 @@ export { CommandItem, CommandShortcut, CommandSeparator, -}; +} diff --git a/packages/ui/components/dialog.tsx b/packages/ui/components/dialog.tsx index d90285ae7..b40fabba6 100644 --- a/packages/ui/components/dialog.tsx +++ b/packages/ui/components/dialog.tsx @@ -1,32 +1,32 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as DialogPrimitive from "@radix-ui/react-dialog"; -import { XIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" +import type * as React from "react" function Dialog({ ...props }: React.ComponentProps) { - return ; + return } function DialogTrigger({ ...props }: React.ComponentProps) { - return ; + return } function DialogPortal({ ...props }: React.ComponentProps) { - return ; + return } function DialogClose({ ...props }: React.ComponentProps) { - return ; + return } function DialogOverlay({ @@ -42,7 +42,7 @@ function DialogOverlay({ data-slot="dialog-overlay" {...props} /> - ); + ) } function DialogContent({ @@ -51,7 +51,7 @@ function DialogContent({ showCloseButton = true, ...props }: React.ComponentProps & { - showCloseButton?: boolean; + showCloseButton?: boolean }) { return ( @@ -76,7 +76,7 @@ function DialogContent({ )} - ); + ) } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -86,7 +86,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="dialog-header" {...props} /> - ); + ) } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -99,7 +99,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { data-slot="dialog-footer" {...props} /> - ); + ) } function DialogTitle({ @@ -112,7 +112,7 @@ function DialogTitle({ data-slot="dialog-title" {...props} /> - ); + ) } function DialogDescription({ @@ -125,7 +125,7 @@ function DialogDescription({ data-slot="dialog-description" {...props} /> - ); + ) } export { @@ -139,4 +139,4 @@ export { DialogPortal, DialogTitle, DialogTrigger, -}; +} diff --git a/packages/ui/components/drawer.tsx b/packages/ui/components/drawer.tsx index 3e1b1c5e8..ad3e771eb 100644 --- a/packages/ui/components/drawer.tsx +++ b/packages/ui/components/drawer.tsx @@ -1,31 +1,31 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import type * as React from "react"; -import { Drawer as DrawerPrimitive } from "vaul"; +import { cn } from "@lib/utils" +import type * as React from "react" +import { Drawer as DrawerPrimitive } from "vaul" function Drawer({ ...props }: React.ComponentProps) { - return ; + return } function DrawerTrigger({ ...props }: React.ComponentProps) { - return ; + return } function DrawerPortal({ ...props }: React.ComponentProps) { - return ; + return } function DrawerClose({ ...props }: React.ComponentProps) { - return ; + return } function DrawerOverlay({ @@ -41,7 +41,7 @@ function DrawerOverlay({ data-slot="drawer-overlay" {...props} /> - ); + ) } function DrawerContent({ @@ -56,7 +56,7 @@ function DrawerContent({ className={cn( "group/drawer-content bg-background fixed z-50 flex h-auto flex-col", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", - "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", + "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className, @@ -68,7 +68,7 @@ function DrawerContent({ {children} - ); + ) } function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -81,7 +81,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="drawer-header" {...props} /> - ); + ) } function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -91,7 +91,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { data-slot="drawer-footer" {...props} /> - ); + ) } function DrawerTitle({ @@ -104,7 +104,7 @@ function DrawerTitle({ data-slot="drawer-title" {...props} /> - ); + ) } function DrawerDescription({ @@ -117,7 +117,7 @@ function DrawerDescription({ data-slot="drawer-description" {...props} /> - ); + ) } export { @@ -131,4 +131,4 @@ export { DrawerFooter, DrawerTitle, DrawerDescription, -}; +} diff --git a/packages/ui/components/dropdown-menu.tsx b/packages/ui/components/dropdown-menu.tsx index 5af01088e..fbd09e9cf 100644 --- a/packages/ui/components/dropdown-menu.tsx +++ b/packages/ui/components/dropdown-menu.tsx @@ -1,14 +1,14 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; -import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" +import type * as React from "react" function DropdownMenu({ ...props }: React.ComponentProps) { - return ; + return } function DropdownMenuPortal({ @@ -16,7 +16,7 @@ function DropdownMenuPortal({ }: React.ComponentProps) { return ( - ); + ) } function DropdownMenuTrigger({ @@ -27,7 +27,7 @@ function DropdownMenuTrigger({ data-slot="dropdown-menu-trigger" {...props} /> - ); + ) } function DropdownMenuContent({ @@ -47,7 +47,7 @@ function DropdownMenuContent({ {...props} /> - ); + ) } function DropdownMenuGroup({ @@ -55,7 +55,7 @@ function DropdownMenuGroup({ }: React.ComponentProps) { return ( - ); + ) } function DropdownMenuItem({ @@ -64,8 +64,8 @@ function DropdownMenuItem({ variant = "default", ...props }: React.ComponentProps & { - inset?: boolean; - variant?: "default" | "destructive"; + inset?: boolean + variant?: "default" | "destructive" }) { return ( - ); + ) } function DropdownMenuCheckboxItem({ @@ -104,7 +104,7 @@ function DropdownMenuCheckboxItem({ {children} - ); + ) } function DropdownMenuRadioGroup({ @@ -115,7 +115,7 @@ function DropdownMenuRadioGroup({ data-slot="dropdown-menu-radio-group" {...props} /> - ); + ) } function DropdownMenuRadioItem({ @@ -139,7 +139,7 @@ function DropdownMenuRadioItem({ {children} - ); + ) } function DropdownMenuLabel({ @@ -147,7 +147,7 @@ function DropdownMenuLabel({ inset, ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean }) { return ( - ); + ) } function DropdownMenuSeparator({ @@ -172,7 +172,7 @@ function DropdownMenuSeparator({ data-slot="dropdown-menu-separator" {...props} /> - ); + ) } function DropdownMenuShortcut({ @@ -188,13 +188,13 @@ function DropdownMenuShortcut({ data-slot="dropdown-menu-shortcut" {...props} /> - ); + ) } function DropdownMenuSub({ ...props }: React.ComponentProps) { - return ; + return } function DropdownMenuSubTrigger({ @@ -203,7 +203,7 @@ function DropdownMenuSubTrigger({ children, ...props }: React.ComponentProps & { - inset?: boolean; + inset?: boolean }) { return ( - ); + ) } function DropdownMenuSubContent({ @@ -234,7 +234,7 @@ function DropdownMenuSubContent({ data-slot="dropdown-menu-sub-content" {...props} /> - ); + ) } export { @@ -253,4 +253,4 @@ export { DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, -}; +} diff --git a/packages/ui/components/grid-plus.tsx b/packages/ui/components/grid-plus.tsx index 5517e5b3a..719b854a7 100644 --- a/packages/ui/components/grid-plus.tsx +++ b/packages/ui/components/grid-plus.tsx @@ -1,11 +1,11 @@ interface PlusPatternBackgroundProps { - plusSize?: number; - plusColor?: string; - backgroundColor?: string; - className?: string; - style?: React.CSSProperties; - fade?: boolean; - [key: string]: any; + plusSize?: number + plusColor?: string + backgroundColor?: string + className?: string + style?: React.CSSProperties + fade?: boolean + [key: string]: any } export const BackgroundPlus: React.FC = ({ @@ -17,21 +17,21 @@ export const BackgroundPlus: React.FC = ({ style, ...props }) => { - const encodedPlusColor = encodeURIComponent(plusColor); + const encodedPlusColor = encodeURIComponent(plusColor) const maskStyle: React.CSSProperties = fade ? { maskImage: "radial-gradient(circle, white 10%, transparent 90%)", WebkitMaskImage: "radial-gradient(circle, white 10%, transparent 90%)", } - : {}; + : {} const backgroundStyle: React.CSSProperties = { backgroundColor, backgroundImage: `url("data:image/svg+xml,%3Csvg width='${plusSize}' height='${plusSize}' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='${encodedPlusColor}' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, ...maskStyle, ...style, - }; + } return (
= ({ style={backgroundStyle} {...props} /> - ); -}; + ) +} -export default BackgroundPlus; +export default BackgroundPlus diff --git a/packages/ui/components/hover-card.tsx b/packages/ui/components/hover-card.tsx index d75f45f61..2150c1cce 100644 --- a/packages/ui/components/hover-card.tsx +++ b/packages/ui/components/hover-card.tsx @@ -1,13 +1,13 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as HoverCardPrimitive from "@radix-ui/react-hover-card"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as HoverCardPrimitive from "@radix-ui/react-hover-card" +import type * as React from "react" function HoverCard({ ...props }: React.ComponentProps) { - return ; + return } function HoverCardTrigger({ @@ -15,7 +15,7 @@ function HoverCardTrigger({ }: React.ComponentProps) { return ( - ); + ) } function HoverCardContent({ @@ -37,7 +37,7 @@ function HoverCardContent({ {...props} /> - ); + ) } -export { HoverCard, HoverCardTrigger, HoverCardContent }; +export { HoverCard, HoverCardTrigger, HoverCardContent } diff --git a/packages/ui/components/input.tsx b/packages/ui/components/input.tsx index 4fb1bd7e9..cb6706932 100644 --- a/packages/ui/components/input.tsx +++ b/packages/ui/components/input.tsx @@ -1,5 +1,5 @@ -import { cn } from "@lib/utils"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import type * as React from "react" function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( @@ -14,7 +14,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { type={type} {...props} /> - ); + ) } -export { Input }; +export { Input } diff --git a/packages/ui/components/label.tsx b/packages/ui/components/label.tsx index 97961968c..f1c2a2f4b 100644 --- a/packages/ui/components/label.tsx +++ b/packages/ui/components/label.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as LabelPrimitive from "@radix-ui/react-label"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as LabelPrimitive from "@radix-ui/react-label" +import type * as React from "react" function Label({ className, @@ -17,7 +17,7 @@ function Label({ data-slot="label" {...props} /> - ); + ) } -export { Label }; +export { Label } diff --git a/packages/ui/components/popover.tsx b/packages/ui/components/popover.tsx index b3dbe9bc9..bbb8885aa 100644 --- a/packages/ui/components/popover.tsx +++ b/packages/ui/components/popover.tsx @@ -1,19 +1,19 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as PopoverPrimitive from "@radix-ui/react-popover"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as PopoverPrimitive from "@radix-ui/react-popover" +import type * as React from "react" function Popover({ ...props }: React.ComponentProps) { - return ; + return } function PopoverTrigger({ ...props }: React.ComponentProps) { - return ; + return } function PopoverContent({ @@ -35,13 +35,13 @@ function PopoverContent({ {...props} /> - ); + ) } function PopoverAnchor({ ...props }: React.ComponentProps) { - return ; + return } -export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }; +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } diff --git a/packages/ui/components/progress.tsx b/packages/ui/components/progress.tsx index d3300cefa..c42d1c0cc 100644 --- a/packages/ui/components/progress.tsx +++ b/packages/ui/components/progress.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as ProgressPrimitive from "@radix-ui/react-progress"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as ProgressPrimitive from "@radix-ui/react-progress" +import type * as React from "react" function Progress({ className, @@ -24,7 +24,7 @@ function Progress({ style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> - ); + ) } -export { Progress }; +export { Progress } diff --git a/packages/ui/components/scroll-area.tsx b/packages/ui/components/scroll-area.tsx index 3d4ccf972..26ce58ca0 100644 --- a/packages/ui/components/scroll-area.tsx +++ b/packages/ui/components/scroll-area.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" +import type * as React from "react" function ScrollArea({ className, @@ -24,7 +24,7 @@ function ScrollArea({ - ); + ) } function ScrollBar({ @@ -51,7 +51,7 @@ function ScrollBar({ data-slot="scroll-area-thumb" /> - ); + ) } -export { ScrollArea, ScrollBar }; +export { ScrollArea, ScrollBar } diff --git a/packages/ui/components/select.tsx b/packages/ui/components/select.tsx index 7a20f4c47..ff905ed05 100644 --- a/packages/ui/components/select.tsx +++ b/packages/ui/components/select.tsx @@ -1,26 +1,26 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as SelectPrimitive from "@radix-ui/react-select"; -import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as SelectPrimitive from "@radix-ui/react-select" +import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react" +import type * as React from "react" function Select({ ...props }: React.ComponentProps) { - return ; + return } function SelectGroup({ ...props }: React.ComponentProps) { - return ; + return } function SelectValue({ ...props }: React.ComponentProps) { - return ; + return } function SelectTrigger({ @@ -29,7 +29,7 @@ function SelectTrigger({ children, ...props }: React.ComponentProps & { - size?: "sm" | "default"; + size?: "sm" | "default" }) { return ( - ); + ) } function SelectContent({ @@ -81,7 +81,7 @@ function SelectContent({ - ); + ) } function SelectLabel({ @@ -94,7 +94,7 @@ function SelectLabel({ data-slot="select-label" {...props} /> - ); + ) } function SelectItem({ @@ -118,7 +118,7 @@ function SelectItem({ {children} - ); + ) } function SelectSeparator({ @@ -131,7 +131,7 @@ function SelectSeparator({ data-slot="select-separator" {...props} /> - ); + ) } function SelectScrollUpButton({ @@ -149,7 +149,7 @@ function SelectScrollUpButton({ > - ); + ) } function SelectScrollDownButton({ @@ -167,7 +167,7 @@ function SelectScrollDownButton({ > - ); + ) } export { @@ -181,4 +181,4 @@ export { SelectSeparator, SelectTrigger, SelectValue, -}; +} diff --git a/packages/ui/components/separator.tsx b/packages/ui/components/separator.tsx index 629bf4d5e..670b6944a 100644 --- a/packages/ui/components/separator.tsx +++ b/packages/ui/components/separator.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as SeparatorPrimitive from "@radix-ui/react-separator"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as SeparatorPrimitive from "@radix-ui/react-separator" +import type * as React from "react" function Separator({ className, @@ -21,7 +21,7 @@ function Separator({ orientation={orientation} {...props} /> - ); + ) } -export { Separator }; +export { Separator } diff --git a/packages/ui/components/shadcn-io/dropzone.tsx b/packages/ui/components/shadcn-io/dropzone.tsx index 4d78d9076..05b12023b 100644 --- a/packages/ui/components/shadcn-io/dropzone.tsx +++ b/packages/ui/components/shadcn-io/dropzone.tsx @@ -1,48 +1,48 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import { Button } from "@ui/components/button"; -import { UploadIcon } from "lucide-react"; -import type { ReactNode } from "react"; -import { createContext, useContext } from "react"; -import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone"; -import { useDropzone } from "react-dropzone"; +import { cn } from "@lib/utils" +import { Button } from "@ui/components/button" +import { UploadIcon } from "lucide-react" +import type { ReactNode } from "react" +import { createContext, useContext } from "react" +import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone" +import { useDropzone } from "react-dropzone" type DropzoneContextType = { - src?: File[]; - accept?: DropzoneOptions["accept"]; - maxSize?: DropzoneOptions["maxSize"]; - minSize?: DropzoneOptions["minSize"]; - maxFiles?: DropzoneOptions["maxFiles"]; -}; + src?: File[] + accept?: DropzoneOptions["accept"] + maxSize?: DropzoneOptions["maxSize"] + minSize?: DropzoneOptions["minSize"] + maxFiles?: DropzoneOptions["maxFiles"] +} const renderBytes = (bytes: number) => { - const units = ["B", "KB", "MB", "GB", "TB", "PB"]; - let size = bytes; - let unitIndex = 0; + const units = ["B", "KB", "MB", "GB", "TB", "PB"] + let size = bytes + let unitIndex = 0 while (size >= 1024 && unitIndex < units.length - 1) { - size /= 1024; - unitIndex++; + size /= 1024 + unitIndex++ } - return `${size.toFixed(2)}${units[unitIndex]}`; -}; + return `${size.toFixed(2)}${units[unitIndex]}` +} const DropzoneContext = createContext( undefined, -); +) export type DropzoneProps = Omit & { - src?: File[]; - className?: string; + src?: File[] + className?: string onDrop?: ( acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent, - ) => void; - children?: ReactNode; -}; + ) => void + children?: ReactNode +} export const Dropzone = ({ accept, @@ -66,15 +66,15 @@ export const Dropzone = ({ disabled, onDrop: (acceptedFiles, fileRejections, event) => { if (fileRejections.length > 0) { - const message = fileRejections.at(0)?.errors.at(0)?.message; - onError?.(new Error(message)); - return; + const message = fileRejections.at(0)?.errors.at(0)?.message + onError?.(new Error(message)) + return } - onDrop?.(acceptedFiles, fileRejections, event); + onDrop?.(acceptedFiles, fileRejections, event) }, ...props, - }); + }) return ( - ); -}; + ) +} const useDropzoneContext = () => { - const context = useContext(DropzoneContext); + const context = useContext(DropzoneContext) if (!context) { - throw new Error("useDropzoneContext must be used within a Dropzone"); + throw new Error("useDropzoneContext must be used within a Dropzone") } - return context; -}; + return context +} export type DropzoneContentProps = { - children?: ReactNode; - className?: string; -}; + children?: ReactNode + className?: string +} -const maxLabelItems = 1; +const maxLabelItems = 1 export const DropzoneContent = ({ children, className, }: DropzoneContentProps) => { - const { src } = useDropzoneContext(); + const { src } = useDropzoneContext() if (!src) { - return null; + return null } if (children) { - return children; + return children } return ( @@ -146,41 +146,41 @@ export const DropzoneContent = ({ Drag and drop or click to replace

- ); -}; + ) +} export type DropzoneEmptyStateProps = { - children?: ReactNode; - className?: string; -}; + children?: ReactNode + className?: string +} export const DropzoneEmptyState = ({ children, className, }: DropzoneEmptyStateProps) => { - const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext(); + const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext() if (src) { - return null; + return null } if (children) { - return children; + return children } - let caption = ""; + let caption = "" if (accept) { - caption += "Accepts "; - caption += new Intl.ListFormat("en").format(Object.keys(accept)); + caption += "Accepts " + caption += new Intl.ListFormat("en").format(Object.keys(accept)) } if (minSize && maxSize) { - caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`; + caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}` } else if (minSize) { - caption += ` at least ${renderBytes(minSize)}`; + caption += ` at least ${renderBytes(minSize)}` } else if (maxSize) { - caption += ` less than ${renderBytes(maxSize)}`; + caption += ` less than ${renderBytes(maxSize)}` } return ( @@ -198,5 +198,5 @@ export const DropzoneEmptyState = ({

{caption}.

)}
- ); -}; + ) +} diff --git a/packages/ui/components/sheet.tsx b/packages/ui/components/sheet.tsx index fc49af38f..7fd6004b3 100644 --- a/packages/ui/components/sheet.tsx +++ b/packages/ui/components/sheet.tsx @@ -1,30 +1,30 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as SheetPrimitive from "@radix-ui/react-dialog"; -import { XIcon } from "lucide-react"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { XIcon } from "lucide-react" +import type * as React from "react" function Sheet({ ...props }: React.ComponentProps) { - return ; + return } function SheetTrigger({ ...props }: React.ComponentProps) { - return ; + return } function SheetClose({ ...props }: React.ComponentProps) { - return ; + return } function SheetPortal({ ...props }: React.ComponentProps) { - return ; + return } function SheetOverlay({ @@ -40,7 +40,7 @@ function SheetOverlay({ data-slot="sheet-overlay" {...props} /> - ); + ) } function SheetContent({ @@ -49,7 +49,7 @@ function SheetContent({ side = "right", ...props }: React.ComponentProps & { - side?: "top" | "right" | "bottom" | "left"; + side?: "top" | "right" | "bottom" | "left" }) { return ( @@ -77,7 +77,7 @@ function SheetContent({ - ); + ) } function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -87,7 +87,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="sheet-header" {...props} /> - ); + ) } function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -97,7 +97,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { data-slot="sheet-footer" {...props} /> - ); + ) } function SheetTitle({ @@ -110,7 +110,7 @@ function SheetTitle({ data-slot="sheet-title" {...props} /> - ); + ) } function SheetDescription({ @@ -123,7 +123,7 @@ function SheetDescription({ data-slot="sheet-description" {...props} /> - ); + ) } export { @@ -135,4 +135,4 @@ export { SheetFooter, SheetTitle, SheetDescription, -}; +} diff --git a/packages/ui/components/sidebar.tsx b/packages/ui/components/sidebar.tsx index 5412a1968..dbceb782a 100644 --- a/packages/ui/components/sidebar.tsx +++ b/packages/ui/components/sidebar.tsx @@ -1,55 +1,55 @@ -"use client"; - -import { useIsMobile } from "@hooks/use-mobile"; -import { cn } from "@lib/utils"; -import { Slot } from "@radix-ui/react-slot"; -import { Button } from "@ui/components/button"; -import { Input } from "@ui/components/input"; -import { Separator } from "@ui/components/separator"; +"use client" + +import { useIsMobile } from "@hooks/use-mobile" +import { cn } from "@lib/utils" +import { Slot } from "@radix-ui/react-slot" +import { Button } from "@ui/components/button" +import { Input } from "@ui/components/input" +import { Separator } from "@ui/components/separator" import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, -} from "@ui/components/sheet"; -import { Skeleton } from "@ui/components/skeleton"; +} from "@ui/components/sheet" +import { Skeleton } from "@ui/components/skeleton" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, -} from "@ui/components/tooltip"; -import { cva, type VariantProps } from "class-variance-authority"; -import { PanelLeftIcon } from "lucide-react"; -import * as React from "react"; - -const SIDEBAR_COOKIE_NAME = "sidebar_state"; -const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; -const SIDEBAR_WIDTH = "16rem"; -const SIDEBAR_WIDTH_MOBILE = "18rem"; -const SIDEBAR_WIDTH_ICON = "3rem"; -const SIDEBAR_KEYBOARD_SHORTCUT = "b"; +} from "@ui/components/tooltip" +import { cva, type VariantProps } from "class-variance-authority" +import { PanelLeftIcon } from "lucide-react" +import * as React from "react" + +const SIDEBAR_COOKIE_NAME = "sidebar_state" +const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 +const SIDEBAR_WIDTH = "16rem" +const SIDEBAR_WIDTH_MOBILE = "18rem" +const SIDEBAR_WIDTH_ICON = "3rem" +const SIDEBAR_KEYBOARD_SHORTCUT = "b" type SidebarContextProps = { - state: "expanded" | "collapsed"; - open: boolean; - setOpen: (open: boolean) => void; - openMobile: boolean; - setOpenMobile: (open: boolean) => void; - isMobile: boolean; - toggleSidebar: () => void; -}; + state: "expanded" | "collapsed" + open: boolean + setOpen: (open: boolean) => void + openMobile: boolean + setOpenMobile: (open: boolean) => void + isMobile: boolean + toggleSidebar: () => void +} -const SidebarContext = React.createContext(null); +const SidebarContext = React.createContext(null) function useSidebar() { - const context = React.useContext(SidebarContext); + const context = React.useContext(SidebarContext) if (!context) { - throw new Error("useSidebar must be used within a SidebarProvider."); + throw new Error("useSidebar must be used within a SidebarProvider.") } - return context; + return context } function SidebarProvider({ @@ -61,36 +61,36 @@ function SidebarProvider({ children, ...props }: React.ComponentProps<"div"> & { - defaultOpen?: boolean; - open?: boolean; - onOpenChange?: (open: boolean) => void; + defaultOpen?: boolean + open?: boolean + onOpenChange?: (open: boolean) => void }) { - const isMobile = useIsMobile(); - const [openMobile, setOpenMobile] = React.useState(false); + const isMobile = useIsMobile() + const [openMobile, setOpenMobile] = React.useState(false) // This is the internal state of the sidebar. // We use openProp and setOpenProp for control from outside the component. - const [_open, _setOpen] = React.useState(defaultOpen); - const open = openProp ?? _open; + const [_open, _setOpen] = React.useState(defaultOpen) + const open = openProp ?? _open const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { - const openState = typeof value === "function" ? value(open) : value; + const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { - setOpenProp(openState); + setOpenProp(openState) } else { - _setOpen(openState); + _setOpen(openState) } // This sets the cookie to keep the sidebar state. - document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; + document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` }, [setOpenProp, open], - ); + ) // Helper to toggle the sidebar. const toggleSidebar = React.useCallback(() => { - return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open); - }, [isMobile, setOpen]); + return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open) + }, [isMobile, setOpen]) // Adds a keyboard shortcut to toggle the sidebar. React.useEffect(() => { @@ -99,18 +99,18 @@ function SidebarProvider({ event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey) ) { - event.preventDefault(); - toggleSidebar(); + event.preventDefault() + toggleSidebar() } - }; + } - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [toggleSidebar]); + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [toggleSidebar]) // We add a state so that we can do data-state="expanded" or "collapsed". // This makes it easier to style the sidebar with Tailwind classes. - const state = open ? "expanded" : "collapsed"; + const state = open ? "expanded" : "collapsed" const contextValue = React.useMemo( () => ({ @@ -123,7 +123,7 @@ function SidebarProvider({ toggleSidebar, }), [state, open, setOpen, isMobile, openMobile, toggleSidebar], - ); + ) return ( @@ -147,7 +147,7 @@ function SidebarProvider({
- ); + ) } function Sidebar({ @@ -158,11 +158,11 @@ function Sidebar({ children, ...props }: React.ComponentProps<"div"> & { - side?: "left" | "right"; - variant?: "sidebar" | "floating" | "inset"; - collapsible?: "offcanvas" | "icon" | "none"; + side?: "left" | "right" + variant?: "sidebar" | "floating" | "inset" + collapsible?: "offcanvas" | "icon" | "none" }) { - const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); + const { isMobile, state, openMobile, setOpenMobile } = useSidebar() if (collapsible === "none") { return ( @@ -176,7 +176,7 @@ function Sidebar({ > {children}
- ); + ) } if (isMobile) { @@ -201,7 +201,7 @@ function Sidebar({
{children}
- ); + ) } return ( @@ -249,7 +249,7 @@ function Sidebar({
- ); + ) } function SidebarTrigger({ @@ -257,7 +257,7 @@ function SidebarTrigger({ onClick, ...props }: React.ComponentProps) { - const { toggleSidebar } = useSidebar(); + const { toggleSidebar } = useSidebar() return ( - ); + ) } function SidebarRail({ className, ...props }: React.ComponentProps<"button">) { - const { toggleSidebar } = useSidebar(); + const { toggleSidebar } = useSidebar() return (
- ); + ) } function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { @@ -25,7 +25,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { data-slot="table-header" {...props} /> - ); + ) } function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { @@ -35,7 +35,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { data-slot="table-body" {...props} /> - ); + ) } function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { @@ -48,7 +48,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { data-slot="table-footer" {...props} /> - ); + ) } function TableRow({ className, ...props }: React.ComponentProps<"tr">) { @@ -61,7 +61,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) { data-slot="table-row" {...props} /> - ); + ) } function TableHead({ className, ...props }: React.ComponentProps<"th">) { @@ -74,7 +74,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) { data-slot="table-head" {...props} /> - ); + ) } function TableCell({ className, ...props }: React.ComponentProps<"td">) { @@ -87,7 +87,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) { data-slot="table-cell" {...props} /> - ); + ) } function TableCaption({ @@ -100,7 +100,7 @@ function TableCaption({ data-slot="table-caption" {...props} /> - ); + ) } export { @@ -112,4 +112,4 @@ export { TableRow, TableCell, TableCaption, -}; +} diff --git a/packages/ui/components/tabs.tsx b/packages/ui/components/tabs.tsx index 42aae355c..22e576fa1 100644 --- a/packages/ui/components/tabs.tsx +++ b/packages/ui/components/tabs.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as TabsPrimitive from "@radix-ui/react-tabs"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as TabsPrimitive from "@radix-ui/react-tabs" +import type * as React from "react" function Tabs({ className, @@ -14,7 +14,7 @@ function Tabs({ data-slot="tabs" {...props} /> - ); + ) } function TabsList({ @@ -30,7 +30,7 @@ function TabsList({ data-slot="tabs-list" {...props} /> - ); + ) } function TabsTrigger({ @@ -46,7 +46,7 @@ function TabsTrigger({ data-slot="tabs-trigger" {...props} /> - ); + ) } function TabsContent({ @@ -59,7 +59,7 @@ function TabsContent({ data-slot="tabs-content" {...props} /> - ); + ) } -export { Tabs, TabsList, TabsTrigger, TabsContent }; +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/packages/ui/components/text-separator.tsx b/packages/ui/components/text-separator.tsx index bd4482331..adf6a8864 100644 --- a/packages/ui/components/text-separator.tsx +++ b/packages/ui/components/text-separator.tsx @@ -1,7 +1,7 @@ -import { cn } from "@lib/utils"; +import { cn } from "@lib/utils" interface TextSeparatorProps extends React.ComponentProps<"div"> { - text: string; + text: string } export function TextSeparator({ @@ -18,5 +18,5 @@ export function TextSeparator({ {text}
- ); + ) } diff --git a/packages/ui/components/textarea.tsx b/packages/ui/components/textarea.tsx index 9e0e31463..6ca3b1f85 100644 --- a/packages/ui/components/textarea.tsx +++ b/packages/ui/components/textarea.tsx @@ -1,5 +1,5 @@ -import { cn } from "@lib/utils"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import type * as React from "react" function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { return ( @@ -11,7 +11,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { data-slot="textarea" {...props} /> - ); + ) } -export { Textarea }; +export { Textarea } diff --git a/packages/ui/components/toggle-group.tsx b/packages/ui/components/toggle-group.tsx index 5fa25b8a5..b8621419e 100644 --- a/packages/ui/components/toggle-group.tsx +++ b/packages/ui/components/toggle-group.tsx @@ -1,17 +1,17 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; -import { toggleVariants } from "@ui/components/toggle"; -import type { VariantProps } from "class-variance-authority"; -import * as React from "react"; +import { cn } from "@lib/utils" +import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" +import { toggleVariants } from "@ui/components/toggle" +import type { VariantProps } from "class-variance-authority" +import * as React from "react" const ToggleGroupContext = React.createContext< VariantProps >({ size: "default", variant: "default", -}); +}) function ToggleGroup({ className, @@ -36,7 +36,7 @@ function ToggleGroup({ {children} - ); + ) } function ToggleGroupItem({ @@ -47,7 +47,7 @@ function ToggleGroupItem({ ...props }: React.ComponentProps & VariantProps) { - const context = React.useContext(ToggleGroupContext); + const context = React.useContext(ToggleGroupContext) return ( {children} - ); + ) } -export { ToggleGroup, ToggleGroupItem }; +export { ToggleGroup, ToggleGroupItem } diff --git a/packages/ui/components/toggle.tsx b/packages/ui/components/toggle.tsx index 1a240825b..ca855d288 100644 --- a/packages/ui/components/toggle.tsx +++ b/packages/ui/components/toggle.tsx @@ -1,9 +1,9 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as TogglePrimitive from "@radix-ui/react-toggle"; -import { cva, type VariantProps } from "class-variance-authority"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as TogglePrimitive from "@radix-ui/react-toggle" +import { cva, type VariantProps } from "class-variance-authority" +import type * as React from "react" const toggleVariants = cva( "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", @@ -25,7 +25,7 @@ const toggleVariants = cva( size: "default", }, }, -); +) function Toggle({ className, @@ -40,7 +40,7 @@ function Toggle({ data-slot="toggle" {...props} /> - ); + ) } -export { Toggle, toggleVariants }; +export { Toggle, toggleVariants } diff --git a/packages/ui/components/tooltip.tsx b/packages/ui/components/tooltip.tsx index daea283d3..973a107f7 100644 --- a/packages/ui/components/tooltip.tsx +++ b/packages/ui/components/tooltip.tsx @@ -1,8 +1,8 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import type * as React from "react"; +import { cn } from "@lib/utils" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import type * as React from "react" function TooltipProvider({ delayDuration = 0, @@ -14,7 +14,7 @@ function TooltipProvider({ delayDuration={delayDuration} {...props} /> - ); + ) } function Tooltip({ @@ -24,13 +24,13 @@ function Tooltip({ - ); + ) } function TooltipTrigger({ ...props }: React.ComponentProps) { - return ; + return } function TooltipContent({ @@ -54,7 +54,7 @@ function TooltipContent({ - ); + ) } -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/packages/ui/copy-button.tsx b/packages/ui/copy-button.tsx index 3e5fa75d5..92ea4914d 100644 --- a/packages/ui/copy-button.tsx +++ b/packages/ui/copy-button.tsx @@ -1,17 +1,17 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import { Button, type buttonVariants } from "@ui/components/button"; -import type { VariantProps } from "class-variance-authority"; -import { CheckIcon, ClipboardIcon } from "lucide-react"; -import * as React from "react"; -import { useEffect } from "react"; +import { cn } from "@lib/utils" +import { Button, type buttonVariants } from "@ui/components/button" +import type { VariantProps } from "class-variance-authority" +import { CheckIcon, ClipboardIcon } from "lucide-react" +import * as React from "react" +import { useEffect } from "react" interface CopyButtonProps extends React.ComponentProps<"button">, VariantProps { - value: string; - src?: string; + value: string + src?: string } export function CopyButton({ @@ -21,13 +21,13 @@ export function CopyButton({ variant = "ghost", ...props }: CopyButtonProps) { - const [hasCopied, setHasCopied] = React.useState(false); + const [hasCopied, setHasCopied] = React.useState(false) useEffect(() => { setTimeout(() => { - setHasCopied(false); - }, 2000); - }, []); + setHasCopied(false) + }, 2000) + }, []) return ( - ); + ) } diff --git a/packages/ui/copyable-cell.tsx b/packages/ui/copyable-cell.tsx index 6b2dbc89e..d23c9c6f5 100644 --- a/packages/ui/copyable-cell.tsx +++ b/packages/ui/copyable-cell.tsx @@ -1,13 +1,13 @@ -"use client"; +"use client" -import { cn } from "@lib/utils"; -import { Label1Regular } from "@ui/text/label/label-1-regular"; -import { AnimatePresence, motion } from "motion/react"; -import * as React from "react"; +import { cn } from "@lib/utils" +import { Label1Regular } from "@ui/text/label/label-1-regular" +import { AnimatePresence, motion } from "motion/react" +import * as React from "react" interface CopyableCellProps extends React.HTMLAttributes { - value: string; - displayValue?: React.ReactNode; + value: string + displayValue?: React.ReactNode } export function CopyableCell({ @@ -17,26 +17,26 @@ export function CopyableCell({ children, ...props }: CopyableCellProps) { - const [hasCopied, setHasCopied] = React.useState(false); + const [hasCopied, setHasCopied] = React.useState(false) React.useEffect(() => { if (hasCopied) { const timeout = setTimeout(() => { - setHasCopied(false); - }, 2000); - return () => clearTimeout(timeout); + setHasCopied(false) + }, 2000) + return () => clearTimeout(timeout) } - }, [hasCopied]); + }, [hasCopied]) const handleCopy = async (e: React.MouseEvent) => { - e.stopPropagation(); + e.stopPropagation() try { - await navigator.clipboard.writeText(value); - setHasCopied(true); + await navigator.clipboard.writeText(value) + setHasCopied(true) } catch (err) { - console.error("Failed to copy:", err); + console.error("Failed to copy:", err) } - }; + } return ( // biome-ignore lint/a11y/noStaticElementInteractions: shadcn @@ -80,5 +80,5 @@ export function CopyableCell({ )}
- ); + ) } diff --git a/packages/ui/input/labeled-input.tsx b/packages/ui/input/labeled-input.tsx index c21e06c65..7e6037190 100644 --- a/packages/ui/input/labeled-input.tsx +++ b/packages/ui/input/labeled-input.tsx @@ -1,13 +1,13 @@ -import { cn } from "@lib/utils"; -import { Input } from "@ui/components/input"; -import { Label1Regular } from "@ui/text/label/label-1-regular"; +import { cn } from "@lib/utils" +import { Input } from "@ui/components/input" +import { Label1Regular } from "@ui/text/label/label-1-regular" interface LabeledInputProps extends React.ComponentProps<"div"> { - label?: string; - inputType: string; - inputPlaceholder: string; - error?: string | null; - inputProps?: React.ComponentProps; + label?: string + inputType: string + inputPlaceholder: string + error?: string | null + inputProps?: React.ComponentProps } export function LabeledInput({ @@ -47,5 +47,5 @@ export function LabeledInput({

)}
- ); + ) } diff --git a/packages/ui/other/anonymous-auth.tsx b/packages/ui/other/anonymous-auth.tsx index 32db86646..009902f9e 100644 --- a/packages/ui/other/anonymous-auth.tsx +++ b/packages/ui/other/anonymous-auth.tsx @@ -1,53 +1,53 @@ -"use client"; +"use client" -import { authClient } from "@lib/auth"; -import { useRouter } from "next/navigation"; -import { useEffect } from "react"; +import { authClient } from "@lib/auth" +import { useRouter } from "next/navigation" +import { useEffect } from "react" export const AnonymousAuth = ({ dashboardPath = "/dashboard", loginPath = "/login", }) => { - const router = useRouter(); + const router = useRouter() useEffect(() => { const createAnonymousSession = async () => { - const session = await authClient.getSession(); + const session = await authClient.getSession() if (!session?.session) { console.debug( "[ANONYMOUS_AUTH] No session found, creating anonymous session...", - ); + ) try { // Create anonymous session - console.debug("[ANONYMOUS_AUTH] Calling signIn.anonymous()..."); - const res = await authClient.signIn.anonymous(); + console.debug("[ANONYMOUS_AUTH] Calling signIn.anonymous()...") + const res = await authClient.signIn.anonymous() if (!res.token) { - throw new Error("Failed to get anonymous token"); + throw new Error("Failed to get anonymous token") } // Get the new session console.debug( "[ANONYMOUS_AUTH] Getting new session with anonymous token...", - ); - const newSession = await authClient.getSession(); + ) + const newSession = await authClient.getSession() - console.debug("[ANONYMOUS_AUTH] New session retrieved:", newSession); + console.debug("[ANONYMOUS_AUTH] New session retrieved:", newSession) if (!newSession?.session || !newSession?.user) { console.error( "[ANONYMOUS_AUTH] Failed to create anonymous session - missing session or user", - ); - throw new Error("Failed to create anonymous session"); + ) + throw new Error("Failed to create anonymous session") } // Get the user's organization console.debug( "[ANONYMOUS_AUTH] Fetching organizations for anonymous user...", - ); - const orgs = await authClient.organization.list(); + ) + const orgs = await authClient.organization.list() console.debug("[ANONYMOUS_AUTH] Organizations retrieved:", { count: orgs?.length || 0, @@ -56,43 +56,43 @@ export const AnonymousAuth = ({ name: o.name, slug: o.slug, })), - }); + }) - const org = orgs?.[0]; + const org = orgs?.[0] if (!org) { console.error( "[ANONYMOUS_AUTH] No organization found for anonymous user", - ); - throw new Error("Failed to get organization for anonymous user"); + ) + throw new Error("Failed to get organization for anonymous user") } // Redirect to the organization dashboard console.debug( `[ANONYMOUS_AUTH] Redirecting anonymous user to /${org.slug}${dashboardPath}`, - ); - router.push(dashboardPath); + ) + router.push(dashboardPath) } catch (error) { console.error( "[ANONYMOUS_AUTH] Anonymous session creation error:", error, - ); + ) console.error("[ANONYMOUS_AUTH] Error details:", { message: error instanceof Error ? error.message : "Unknown error", stack: error instanceof Error ? error.stack : undefined, - }); - router.push(loginPath); + }) + router.push(loginPath) } } else if (session.session) { // Session exists, handle organization routing console.debug( "[ANONYMOUS_AUTH] Session exists, checking organization...", - ); + ) if (!session.session.activeOrganizationId) { console.debug( "[ANONYMOUS_AUTH] No active organization ID, fetching organizations...", - ); - const orgs = await authClient.organization.list(); + ) + const orgs = await authClient.organization.list() console.debug("[ANONYMOUS_AUTH] Organizations for existing user:", { count: orgs?.length || 0, @@ -101,50 +101,50 @@ export const AnonymousAuth = ({ name: o.name, slug: o.slug, })), - }); + }) if (orgs?.[0]) { console.debug( `[ANONYMOUS_AUTH] Setting active organization to ${orgs[0].id}`, - ); + ) await authClient.organization.setActive({ organizationId: orgs[0].id, - }); + }) console.debug( `[ANONYMOUS_AUTH] Redirecting to /${orgs[0].slug}${dashboardPath}`, - ); - router.push(dashboardPath); + ) + router.push(dashboardPath) } } else { console.debug( `[ANONYMOUS_AUTH] Active organization ID: ${session.session.activeOrganizationId}`, - ); + ) console.debug( "[ANONYMOUS_AUTH] Fetching full organization details...", - ); + ) const org = await authClient.organization.getFullOrganization({ query: { organizationId: session.session.activeOrganizationId, }, - }); + }) console.debug("[ANONYMOUS_AUTH] Full organization retrieved:", { id: org.id, name: org.name, slug: org.slug, - }); + }) console.debug( `[ANONYMOUS_AUTH] Redirecting to /${org.slug}${dashboardPath}`, - ); - router.push(dashboardPath); + ) + router.push(dashboardPath) } } - }; + } - createAnonymousSession(); - }, [router.push]); + createAnonymousSession() + }, [router.push]) // Return null as this component only handles the redirect logic - return null; -}; + return null +} diff --git a/packages/ui/other/glass-effect.tsx b/packages/ui/other/glass-effect.tsx index 089aa8645..7f7351345 100644 --- a/packages/ui/other/glass-effect.tsx +++ b/packages/ui/other/glass-effect.tsx @@ -1,6 +1,6 @@ interface GlassMenuEffectProps { - rounded?: string; - className?: string; + rounded?: string + className?: string } export function GlassMenuEffect({ @@ -14,5 +14,5 @@ export function GlassMenuEffect({ className={`absolute inset-0 backdrop-blur-md bg-white/5 border border-white/10 ${rounded}`} />
- ); + ) } diff --git a/packages/ui/text/heading/heading-h1-bold.tsx b/packages/ui/text/heading/heading-h1-bold.tsx index b76f3b9bd..c8019a0b5 100644 --- a/packages/ui/text/heading/heading-h1-bold.tsx +++ b/packages/ui/text/heading/heading-h1-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH1Bold({ className, asChild, ...props }: React.ComponentProps<"h1"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h1"; + const Comp = asChild ? Root : "h1" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h1-medium.tsx b/packages/ui/text/heading/heading-h1-medium.tsx index 5724e1f16..52ddda1c5 100644 --- a/packages/ui/text/heading/heading-h1-medium.tsx +++ b/packages/ui/text/heading/heading-h1-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH1Medium({ className, asChild, ...props }: React.ComponentProps<"h1"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h1"; + const Comp = asChild ? Root : "h1" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h2-bold.tsx b/packages/ui/text/heading/heading-h2-bold.tsx index 6711de503..3da9a3992 100644 --- a/packages/ui/text/heading/heading-h2-bold.tsx +++ b/packages/ui/text/heading/heading-h2-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH2Bold({ className, asChild, ...props }: React.ComponentProps<"h2"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h2"; + const Comp = asChild ? Root : "h2" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h2-medium.tsx b/packages/ui/text/heading/heading-h2-medium.tsx index afac0a425..6324fe864 100644 --- a/packages/ui/text/heading/heading-h2-medium.tsx +++ b/packages/ui/text/heading/heading-h2-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH2Medium({ className, asChild, ...props }: React.ComponentProps<"h2"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h2"; + const Comp = asChild ? Root : "h2" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h3-bold.tsx b/packages/ui/text/heading/heading-h3-bold.tsx index be15a33c9..bb97b323a 100644 --- a/packages/ui/text/heading/heading-h3-bold.tsx +++ b/packages/ui/text/heading/heading-h3-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH3Bold({ className, asChild, ...props }: React.ComponentProps<"h3"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h3"; + const Comp = asChild ? Root : "h3" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h3-medium.tsx b/packages/ui/text/heading/heading-h3-medium.tsx index cdaa24a28..de1a59190 100644 --- a/packages/ui/text/heading/heading-h3-medium.tsx +++ b/packages/ui/text/heading/heading-h3-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH3Medium({ className, asChild, ...props }: React.ComponentProps<"h3"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h3"; + const Comp = asChild ? Root : "h3" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h4-bold.tsx b/packages/ui/text/heading/heading-h4-bold.tsx index 5e99c0310..271e86dba 100644 --- a/packages/ui/text/heading/heading-h4-bold.tsx +++ b/packages/ui/text/heading/heading-h4-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH4Bold({ className, asChild, ...props }: React.ComponentProps<"h4"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h4"; + const Comp = asChild ? Root : "h4" return ( - ); + ) } diff --git a/packages/ui/text/heading/heading-h4-medium.tsx b/packages/ui/text/heading/heading-h4-medium.tsx index 1a536508e..83e1ec66f 100644 --- a/packages/ui/text/heading/heading-h4-medium.tsx +++ b/packages/ui/text/heading/heading-h4-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function HeadingH4Medium({ className, asChild, ...props }: React.ComponentProps<"h4"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h4"; + const Comp = asChild ? Root : "h4" return ( - ); + ) } diff --git a/packages/ui/text/label/label-1-medium.tsx b/packages/ui/text/label/label-1-medium.tsx index e599f3e75..a2aa10fe6 100644 --- a/packages/ui/text/label/label-1-medium.tsx +++ b/packages/ui/text/label/label-1-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label1Medium({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/label/label-1-regular.tsx b/packages/ui/text/label/label-1-regular.tsx index ad9ea3198..e740c7545 100644 --- a/packages/ui/text/label/label-1-regular.tsx +++ b/packages/ui/text/label/label-1-regular.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label1Regular({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/label/label-2-medium.tsx b/packages/ui/text/label/label-2-medium.tsx index 89aa2f2dd..b0929a890 100644 --- a/packages/ui/text/label/label-2-medium.tsx +++ b/packages/ui/text/label/label-2-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label2Medium({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/label/label-2-regular.tsx b/packages/ui/text/label/label-2-regular.tsx index 951dc5bf8..54087c717 100644 --- a/packages/ui/text/label/label-2-regular.tsx +++ b/packages/ui/text/label/label-2-regular.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label2Regular({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/label/label-3-medium.tsx b/packages/ui/text/label/label-3-medium.tsx index 5308452e4..4203636e4 100644 --- a/packages/ui/text/label/label-3-medium.tsx +++ b/packages/ui/text/label/label-3-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label3Medium({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/label/label-3-regular.tsx b/packages/ui/text/label/label-3-regular.tsx index 9ca0d65e9..f8986631c 100644 --- a/packages/ui/text/label/label-3-regular.tsx +++ b/packages/ui/text/label/label-3-regular.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Label3Regular({ className, asChild, ...props }: React.ComponentProps<"p"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "p"; + const Comp = asChild ? Root : "p" return ( - ); + ) } diff --git a/packages/ui/text/title/title-1-bold.tsx b/packages/ui/text/title/title-1-bold.tsx index a87e637be..7ae48df66 100644 --- a/packages/ui/text/title/title-1-bold.tsx +++ b/packages/ui/text/title/title-1-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title1Bold({ className, asChild, ...props }: React.ComponentProps<"h1"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h1"; + const Comp = asChild ? Root : "h1" return ( - ); + ) } diff --git a/packages/ui/text/title/title-1-medium.tsx b/packages/ui/text/title/title-1-medium.tsx index 2ac135208..da2314078 100644 --- a/packages/ui/text/title/title-1-medium.tsx +++ b/packages/ui/text/title/title-1-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title1Medium({ className, asChild, ...props }: React.ComponentProps<"h1"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h1"; + const Comp = asChild ? Root : "h1" return ( - ); + ) } diff --git a/packages/ui/text/title/title-2-bold.tsx b/packages/ui/text/title/title-2-bold.tsx index 38bbe34e0..b32dcdbde 100644 --- a/packages/ui/text/title/title-2-bold.tsx +++ b/packages/ui/text/title/title-2-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title2Bold({ className, asChild, ...props }: React.ComponentProps<"h2"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h2"; + const Comp = asChild ? Root : "h2" return ( - ); + ) } diff --git a/packages/ui/text/title/title-2-medium.tsx b/packages/ui/text/title/title-2-medium.tsx index c5a5deae2..d931cff71 100644 --- a/packages/ui/text/title/title-2-medium.tsx +++ b/packages/ui/text/title/title-2-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title2Medium({ className, asChild, ...props }: React.ComponentProps<"h2"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h2"; + const Comp = asChild ? Root : "h2" return ( - ); + ) } diff --git a/packages/ui/text/title/title-3-bold.tsx b/packages/ui/text/title/title-3-bold.tsx index cf9ab7778..6a4a60082 100644 --- a/packages/ui/text/title/title-3-bold.tsx +++ b/packages/ui/text/title/title-3-bold.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title3Bold({ className, asChild, ...props }: React.ComponentProps<"h3"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h3"; + const Comp = asChild ? Root : "h3" return ( - ); + ) } diff --git a/packages/ui/text/title/title-3-medium.tsx b/packages/ui/text/title/title-3-medium.tsx index f862e618d..5e1b13f01 100644 --- a/packages/ui/text/title/title-3-medium.tsx +++ b/packages/ui/text/title/title-3-medium.tsx @@ -1,12 +1,12 @@ -import { cn } from "@lib/utils"; -import { Root } from "@radix-ui/react-slot"; +import { cn } from "@lib/utils" +import { Root } from "@radix-ui/react-slot" export function Title3Medium({ className, asChild, ...props }: React.ComponentProps<"h3"> & { asChild?: boolean }) { - const Comp = asChild ? Root : "h3"; + const Comp = asChild ? Root : "h3" return ( - ); + ) }