img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col",
- className
- )}
- {...props}
- />
- );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
- return (
-
- );
-}
-
-export {
- Card,
- CardHeader,
- CardFooter,
- CardTitle,
- CardAction,
- CardDescription,
- CardContent,
-};
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
deleted file mode 100644
index 0357443..0000000
--- a/apps/web/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
-import { CheckIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
- return (
-
-
-
-
- );
-}
-
-export { Checkbox };
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index d392c5c..0000000
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
- return
;
-}
-
-function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
- return
;
-}
-
-function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
- return
;
-}
-
-function DropdownMenuContent({
- align = "start",
- alignOffset = 0,
- side = "bottom",
- sideOffset = 4,
- className,
- ...props
-}: MenuPrimitive.Popup.Props &
- Pick<
- MenuPrimitive.Positioner.Props,
- "align" | "alignOffset" | "side" | "sideOffset"
- >) {
- return (
-
-
-
-
- );
-}
-
-function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
- return
;
-}
-
-function DropdownMenuLabel({
- className,
- inset,
- ...props
-}: MenuPrimitive.GroupLabel.Props & {
- inset?: boolean;
-}) {
- return (
-
- );
-}
-
-function DropdownMenuItem({
- className,
- inset,
- variant = "default",
- ...props
-}: MenuPrimitive.Item.Props & {
- inset?: boolean;
- variant?: "default" | "destructive";
-}) {
- return (
-
- );
-}
-
-function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
- return
;
-}
-
-function DropdownMenuSubTrigger({
- className,
- inset,
- children,
- ...props
-}: MenuPrimitive.SubmenuTrigger.Props & {
- inset?: boolean;
-}) {
- return (
-
- {children}
-
- );
-}
-
-function DropdownMenuSubContent({
- align = "start",
- alignOffset = -3,
- side = "right",
- sideOffset = 0,
- className,
- ...props
-}: React.ComponentProps
) {
- return (
-
-
-
-
-
- {children}
-
- );
-}
-
-function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
- return (
-
-
-
-
-
- {children}
-
- );
-}
-
-function DropdownMenuSeparator({
- className,
- ...props
-}: MenuPrimitive.Separator.Props) {
- return (
- ;
+
+function FieldRoot({ className, ...props }: FieldRootProps) {
+ return (
+
+ root({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
+ {...props}
+ />
+ );
+}
+
+type FieldLabelProps = React.ComponentProps;
+
+function FieldLabel({ className, ...props }: FieldLabelProps) {
+ return (
+
+ label({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
+ {...props}
+ />
+ );
+}
+
+type FieldControlProps = React.ComponentProps;
+
+function FieldControl({ className, ...props }: FieldControlProps) {
+ return (
+
+ control({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
+ {...props}
+ />
+ );
+}
+
+type FieldDescriptionProps = React.ComponentProps;
+
+function FieldDescription({ className, ...props }: FieldDescriptionProps) {
+ return (
+
+ description({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
+ {...props}
+ />
+ );
+}
+
+type FieldErrorProps = React.ComponentProps;
+
+function FieldError({ className, ...props }: FieldErrorProps) {
+ return (
+
+ error({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
+ {...props}
+ />
+ );
+}
+
+export {
+ FieldRoot,
+ FieldLabel,
+ FieldControl,
+ FieldDescription,
+ FieldError,
+ fieldStyles,
+};
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index bcad978..aae5f13 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,20 +1,26 @@
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import type * as React from "react";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { tv } from "tailwind-variants";
-import { cn } from "@/lib/utils";
+const inputClasses =
+ "h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[invalid]:border-destructive";
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+const inputStyles = tv({
+ base: inputClasses,
+});
+
+type InputProps = React.ComponentProps;
+
+function Input({ className, ...props }: InputProps) {
return (
-
+ inputStyles({
+ class: typeof className === "function" ? className(state) : className,
+ })
+ }
{...props}
/>
);
}
-export { Input };
+export { Input, inputClasses, inputStyles };
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
deleted file mode 100644
index dd3488a..0000000
--- a/apps/web/src/components/ui/label.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Label({ className, ...props }: React.ComponentProps<"label">) {
- return (
- // eslint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is passed via ...props
- ,
+ "className"
+> &
+ VariantProps & { className?: string };
+
+function Separator({ orientation, className, ...props }: SeparatorProps) {
+ return (
+ ) {
- return (
-
- );
+const skeletonStyles = tv({
+ base: "animate-pulse rounded-md bg-muted",
+});
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return
;
}
-export { Skeleton };
+export { Skeleton, skeletonStyles };
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
index ffa341a..d3b6615 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -1,44 +1,9 @@
-import {
- CircleCheckIcon,
- InfoIcon,
- Loader2Icon,
- OctagonXIcon,
- TriangleAlertIcon,
-} from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-import type { ToasterProps } from "sonner";
+import { Toaster as SonnerToaster } from "sonner";
-const Toaster = ({ ...props }: ToasterProps) => {
- const { theme = "system" } = useTheme();
+type ToasterProps = React.ComponentProps;
- return (
-
-
-
- My Account
- {session.user.email}
- {
- authClient.signOut({
- fetchOptions: {
- onSuccess: () => {
- navigate({
- to: "/",
- });
- },
- },
- });
- }}
- >
- Sign Out
-
-
-
-
+
+ {session.user.name}}
+ />
+
+
+
+
+ My Account
+ {session.user.email}
+ {
+ authClient.signOut({
+ fetchOptions: {
+ onSuccess: () => {
+ navigate({ to: "/" });
+ },
+ },
+ });
+ }}
+ >
+ Sign Out
+
+
+
+
+
+
);
}
diff --git a/apps/web/src/functions/get-user.ts b/apps/web/src/functions/get-user.ts
index acf52f8..e0489d6 100644
--- a/apps/web/src/functions/get-user.ts
+++ b/apps/web/src/functions/get-user.ts
@@ -4,6 +4,6 @@ import { authMiddleware } from "@/middleware/auth";
export const getUser = createServerFn({ method: "GET" })
.middleware([authMiddleware])
- .handler(async ({ context }) => {
+ .handler(({ context }) => {
return context.session;
});
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 2ba48ff..2856988 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,6 +1,5 @@
@import "tailwindcss";
@import "tw-animate-css";
-@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
deleted file mode 100644
index ebae5c8..0000000
--- a/apps/web/src/lib/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import type { ClassValue } from "clsx";
-
-export function cn(...inputs: Array) {
- return twMerge(clsx(inputs));
-}
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
new file mode 100644
index 0000000..f147546
--- /dev/null
+++ b/apps/web/src/routeTree.gen.ts
@@ -0,0 +1,140 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as DemoRouteImport } from './routes/demo'
+import { Route as DashboardRouteImport } from './routes/dashboard'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
+
+const LoginRoute = LoginRouteImport.update({
+ id: '/login',
+ path: '/login',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DemoRoute = DemoRouteImport.update({
+ id: '/demo',
+ path: '/demo',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const DashboardRoute = DashboardRouteImport.update({
+ id: '/dashboard',
+ path: '/dashboard',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRouteImport,
+} as any)
+const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
+ id: '/api/auth/$',
+ path: '/api/auth/$',
+ getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/dashboard': typeof DashboardRoute
+ '/demo': typeof DemoRoute
+ '/login': typeof LoginRoute
+ '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '/dashboard': typeof DashboardRoute
+ '/demo': typeof DemoRoute
+ '/login': typeof LoginRoute
+ '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ '/': typeof IndexRoute
+ '/dashboard': typeof DashboardRoute
+ '/demo': typeof DemoRoute
+ '/login': typeof LoginRoute
+ '/api/auth/$': typeof ApiAuthSplatRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
+ fileRoutesByTo: FileRoutesByTo
+ to: '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
+ id: '__root__' | '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ DashboardRoute: typeof DashboardRoute
+ DemoRoute: typeof DemoRoute
+ LoginRoute: typeof LoginRoute
+ ApiAuthSplatRoute: typeof ApiAuthSplatRoute
+}
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/login': {
+ id: '/login'
+ path: '/login'
+ fullPath: '/login'
+ preLoaderRoute: typeof LoginRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/demo': {
+ id: '/demo'
+ path: '/demo'
+ fullPath: '/demo'
+ preLoaderRoute: typeof DemoRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/dashboard': {
+ id: '/dashboard'
+ path: '/dashboard'
+ fullPath: '/dashboard'
+ preLoaderRoute: typeof DashboardRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ '/api/auth/$': {
+ id: '/api/auth/$'
+ path: '/api/auth/$'
+ fullPath: '/api/auth/$'
+ preLoaderRoute: typeof ApiAuthSplatRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ DashboardRoute: DashboardRoute,
+ DemoRoute: DemoRoute,
+ LoginRoute: LoginRoute,
+ ApiAuthSplatRoute: ApiAuthSplatRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+ interface Register {
+ ssr: true
+ router: Awaited>
+ }
+}
diff --git a/apps/web/src/routes/dashboard.tsx b/apps/web/src/routes/dashboard.tsx
index deeda21..4cf438c 100644
--- a/apps/web/src/routes/dashboard.tsx
+++ b/apps/web/src/routes/dashboard.tsx
@@ -8,7 +8,7 @@ export const Route = createFileRoute("/dashboard")({
const session = await getUser();
return { session };
},
- loader: async ({ context }) => {
+ loader: ({ context }) => {
if (!context.session) {
throw redirect({
to: "/login",
diff --git a/apps/web/src/routes/demo.tsx b/apps/web/src/routes/demo.tsx
new file mode 100644
index 0000000..b373b26
--- /dev/null
+++ b/apps/web/src/routes/demo.tsx
@@ -0,0 +1,171 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Heart, Search } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+ FieldControl,
+ FieldDescription,
+ FieldError,
+ FieldLabel,
+ FieldRoot,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const Route = createFileRoute("/demo")({
+ component: DemoPage,
+});
+
+function Section({
+ title,
+ children,
+}: {
+ title: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {title}
+
+ );
+}
+
+function DemoPage() {
+ return (
+
+
Component Demo
+
+ {/* Button */}
+
+
+
+
Variants
+
+ Default
+ Outline
+ Link
+ Destructive
+
+
+
+
Sizes
+
+ Small
+ Default
+ Large
+
+
+
+
+
+
States
+
+ Disabled
+
+
+
+
+
+
+ {/* Field */}
+
+
+ {/* Input (standalone) */}
+
+
+ {/* Separator */}
+
+
+
+
+
Vertical
+
+ Left
+ Right
+
+
+
+
+ {/* Skeleton */}
+
+
+ {/* Sonner / Toast */}
+
+
+ toast("This is a default toast")}
+ >
+ Default Toast
+
+ toast.success("Operation completed")}
+ >
+ Success Toast
+
+ toast.error("Something went wrong")}
+ >
+ Error Toast
+
+
+
+