zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify workspace dropdowns; Update layouts (#458)

Browse Source 
Unified Account and Workspace drop-downs; Layout updates, now header lives within the PageBody component; Sidebars now use floating variant
This commit is contained in:
Giancarlo Buomprisco
2026-03-11 14:45:42 +08:00
committed by GitHub
parent ca585e09be
commit 4bc8448a1d
530 changed files with 14398 additions and 11198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
packages/ui/AGENTS.md
View File

@@ -1,43 +1,46 @@
# UI Components & Styling
# UI Components & Styling Instructions
## Skills
This file contains instructions for working with UI components, styling, and forms.
For forms:
- `/react-form-builder` - Forms with validation and server actions
## Core UI Library
## Import Convention
Always use `@kit/ui/{component}`:
Import from `packages/ui/src/`:
```tsx
// Base UI components
import { Button } from '@kit/ui/button';
import { Card } from '@kit/ui/card';
// Makerkit components
import { If } from '@kit/ui/if';
import { Trans } from '@kit/ui/trans';
import { ProfileAvatar } from '@kit/ui/profile-avatar';
import { toast } from '@kit/ui/sonner';
import { cn } from '@kit/ui/utils';
import { Trans } from '@kit/ui/trans';
```
## Styling
NB: imports must follow the convention "@kit/ui/<name>", no matter the folder they're placed in
- Tailwind CSS v4 with semantic classes
- Prefer: `bg-background`, `text-muted-foreground`, `border-border`
- Use `cn()` for class merging
- Never use hardcoded colors like `bg-white`
## Styling Guidelines
## Key Components
- Use **Tailwind CSS v4** with semantic classes
- Prefer semantic Tailwind classes like `bg-background`, `text-muted-foreground`
- Use `cn()` utility from `@kit/ui/utils` for class merging
| Component | Usage |
|-----------|-------|
| `If` | Conditional rendering |
| `Trans` | Internationalization |
| `toast` | Notifications |
| `Form*` | Form fields |
| `Button` | Actions |
| `Card` | Content containers |
| `Alert` | Error/info messages |
```tsx
import { cn } from '@kit/ui/utils';
## Conditional Rendering
function MyComponent({ className }) {
return (
<div className={cn('bg-background text-foreground', className)}>
Content
</div>
);
}
```
### Conditional Rendering
Use the `If` component from `packages/ui/src/makerkit/if.tsx`:
```tsx
import { If } from '@kit/ui/if';
@@ -45,27 +48,256 @@ import { If } from '@kit/ui/if';
<If condition={isLoading} fallback={<Content />}>
<Spinner />
</If>
// With type inference
<If condition={error}>
{(err) => <ErrorMessage error={err} />}
</If>
```
### Testing Attributes
Use `data-testid` for making e2e testing easier:
```tsx
<button data-testid="submit-button">Submit</button>
<div data-testid="user-profile" data-user-id={user.id}>Profile</div>
```
## Forms with React Hook Form & Zod
```typescript
import * as z from 'zod';
// 1. Schema in separate file
export const CreateNoteSchema = z.object({
title: z.string().min(1),
content: z.string().min(1),
});
// 2. Client component with form
'use client';
const form = useForm({
resolver: zodResolver(CreateNoteSchema),
});
const onSubmit = (data) => {
startTransition(async () => {
await toast.promise(createNoteAction(data), {
loading: 'Creating...',
success: 'Created!',
error: 'Failed!',
}).unwrap();
});
};
```
### Guidelines
- Place Zod resolver in a separate file so it can be reused with Server Actions
- Never add generics to `useForm`, use Zod resolver to infer types instead
- Never use `watch()` instead use hook `useWatch`
- Add `FormDescription` (optionally) and always add `FormMessage` to display errors
## Internationalization
Always use `Trans` component from `packages/ui/src/makerkit/trans.tsx`:
```tsx
import { Trans } from '@kit/ui/trans';
<Trans i18nKey="namespace:key" values={{ name }} />
<Trans
i18nKey="user.welcomeMessage"
values={{ name: user.name }}
/>
// With HTML elements
<Trans
i18nKey="terms.agreement"
components={{
TermsLink: <a href="/terms" className="underline" />,
}}
/>
```
## Testing Attributes
## Toast Notifications
Always add `data-test` for E2E:
Use the `toast` utility from `@kit/ui/sonner`:
```tsx
<button data-test="submit-button">Submit</button>
import { toast } from '@kit/ui/sonner';
// Simple toast
toast.success('Success message');
toast.error('Error message');
// Promise-based toast
await toast.promise(asyncFunction(), {
loading: 'Processing...',
success: 'Done!',
error: 'Failed!',
});
```
## Form Guidelines
## Common Component Patterns
- Use `react-hook-form` with `zodResolver`
- Never add generics to `useForm`
- Use `useWatch` instead of `watch()`
- Always include `FormMessage` for errors
### Loading States
```tsx
import { Spinner } from '@kit/ui/spinner';
<If condition={isLoading} fallback={<Content />}>
<Spinner className="h-4 w-4" />
</If>
```
### Error Handling
```tsx
import { TriangleAlert } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
<If condition={Boolean(error)}>
<Alert variant="destructive">
<TriangleAlert className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>{error}</AlertDescription>
</Alert>
</If>
```
### Button Patterns
```tsx
import { Button } from '@kit/ui/button';
// Loading button
<Button disabled={isPending}>
{isPending ? (
<>
<Spinner className="mr-2 h-4 w-4" />
Loading...
</>
) : (
'Submit'
)}
</Button>
// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost">Ghost</Button>
```
### Card Layouts
```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@kit/ui/card';
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>
Card content goes here
</CardContent>
</Card>
```
## Form Components
### Input Fields
```tsx
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@kit/ui/form';
<FormField
name="title"
render={({ field }) => (
<FormItem>
<FormLabel>Title</FormLabel>
<FormControl render={<Input placeholder="Enter title" {...field} />} />
<FormDescription>
The title of your task
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
```
### Select Components
```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@kit/ui/select';
<FormField
name="category"
render={({ field }) => (
<FormItem>
<FormLabel>Category</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl
render={
<SelectTrigger>
<SelectValue placeholder="Select category" />
</SelectTrigger>
}
/>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
</SelectContent>
</Select>
<FormDescription>
The category of your task
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
```
## Accessibility Guidelines
- Always include proper ARIA labels
- Use semantic HTML elements
- Ensure proper keyboard navigation
```tsx
<button
aria-label="Close modal"
aria-describedby="modal-description"
onClick={onClose}
>
<X className="h-4 w-4" />
</button>
```
## Dark Mode Support
The UI components automatically support dark mode through CSS variables. Use semantic color classes:
```tsx
// Good - semantic colors
<div className="bg-background text-foreground border-border">
<p className="text-muted-foreground">Secondary text</p>
</div>
// Avoid - hardcoded colors
<div className="bg-white text-black border-gray-200">
<p className="text-gray-500">Secondary text</p>
</div>
```

2
packages/ui/CLAUDE.md
View File

@@ -1 +1 @@
@AGENTS.md
@AGENTS.md

7
packages/ui/components.json
View File

@@ -1,15 +1,16 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"style": "base-nova",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "./tailwind.config.ts",
"config": "",
"css": "../../apps/web/styles/globals.css",
"baseColor": "slate",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"iconLibrary": "lucide",
"aliases": {
"components": "~/components",
"utils": "~/utils",

65
packages/ui/package.json
View File

@@ -2,27 +2,32 @@
"name": "@kit/ui",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"clean": "git clean -xdf .turbo node_modules",
"format": "prettier --check \"**/*.{ts,tsx}\"",
"lint": "eslint .",
"typecheck": "tsc --noEmit"
"typecheck": "tsc --noEmit",
"test:unit": "vitest run"
},
"dependencies": {
"@base-ui/react": "^1.2.0",
"@hookform/resolvers": "^5.2.2",
"@radix-ui/react-icons": "^1.3.2",
"@kit/shared": "workspace:*",
"clsx": "^2.1.1",
"cmdk": "1.1.1",
"input-otp": "1.4.2",
"cmdk": "^1.1.1",
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"lucide-react": "catalog:",
"radix-ui": "1.4.3",
"react-dropzone": "^15.0.0",
"react-top-loading-bar": "3.0.2",
"recharts": "2.15.3",
"react-resizable-panels": "^4.7.1",
"react-top-loading-bar": "^3.0.2",
"recharts": "3.7.0",
"tailwind-merge": "^3.5.0"
},
"devDependencies": {
"@kit/eslint-config": "workspace:*",
"@kit/i18n": "workspace:*",
"@kit/prettier-config": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@supabase/supabase-js": "catalog:",
@@ -33,21 +38,31 @@
"@types/react-dom": "catalog:",
"class-variance-authority": "^0.7.1",
"date-fns": "^4.1.0",
"eslint": "catalog:",
"next": "catalog:",
"next-intl": "^4.8.3",
"next-safe-action": "catalog:",
"next-themes": "0.4.6",
"prettier": "^3.8.1",
"react-day-picker": "^9.13.2",
"react-day-picker": "^9.14.0",
"react-hook-form": "catalog:",
"react-i18next": "catalog:",
"shadcn": "4.0.0",
"sonner": "^2.0.7",
"tailwindcss": "catalog:",
"typescript": "^5.9.3",
"vaul": "^1.1.2",
"vitest": "^4.0.18",
"zod": "catalog:"
},
"prettier": "@kit/prettier-config",
"imports": {
"#utils": [
"./src/lib/utils/index.ts"
],
"#lib/utils": [
"./src/lib/utils/index.ts"
],
"#components/*": [
"./src/shadcn/*"
]
},
"exports": {
@@ -59,6 +74,8 @@
"./card": "./src/shadcn/card.tsx",
"./checkbox": "./src/shadcn/checkbox.tsx",
"./command": "./src/shadcn/command.tsx",
"./context-menu": "./src/shadcn/context-menu.tsx",
"./empty": "./src/shadcn/empty.tsx",
"./data-table": "./src/shadcn/data-table.tsx",
"./dialog": "./src/shadcn/dialog.tsx",
"./dropdown-menu": "./src/shadcn/dropdown-menu.tsx",
@@ -73,10 +90,15 @@
"./sheet": "./src/shadcn/sheet.tsx",
"./slider": "./src/shadcn/slider.tsx",
"./table": "./src/shadcn/table.tsx",
"./pagination": "./src/shadcn/pagination.tsx",
"./native-select": "./src/shadcn/native-select.tsx",
"./toggle": "./src/shadcn/toggle.tsx",
"./tabs": "./src/shadcn/tabs.tsx",
"./tooltip": "./src/shadcn/tooltip.tsx",
"./menu-bar": "./src/shadcn/menu-bar.tsx",
"./sonner": "./src/shadcn/sonner.tsx",
"./heading": "./src/shadcn/heading.tsx",
"./aspect-ratio": "./src/shadcn/aspect-ratio.tsx",
"./alert": "./src/shadcn/alert.tsx",
"./badge": "./src/shadcn/badge.tsx",
"./radio-group": "./src/shadcn/radio-group.tsx",
@@ -87,24 +109,24 @@
"./breadcrumb": "./src/shadcn/breadcrumb.tsx",
"./chart": "./src/shadcn/chart.tsx",
"./skeleton": "./src/shadcn/skeleton.tsx",
"./shadcn-sidebar": "./src/shadcn/sidebar.tsx",
"./sidebar": "./src/shadcn/sidebar.tsx",
"./collapsible": "./src/shadcn/collapsible.tsx",
"./kbd": "./src/shadcn/kbd.tsx",
"./button-group": "./src/shadcn/button-group.tsx",
"./input-group": "./src/shadcn/input-group.tsx",
"./item": "./src/shadcn/item.tsx",
"./field": "./src/shadcn/field.tsx",
"./drawer": "./src/shadcn/drawer.tsx",
"./utils": "./src/lib/utils/index.ts",
"./if": "./src/makerkit/if.tsx",
"./trans": "./src/makerkit/trans.tsx",
"./sidebar": "./src/makerkit/sidebar.tsx",
"./navigation-schema": "./src/makerkit/navigation-config.schema.ts",
"./navigation-utils": "./src/makerkit/navigation-utils.ts",
"./bordered-navigation-menu": "./src/makerkit/bordered-navigation-menu.tsx",
"./spinner": "./src/makerkit/spinner.tsx",
"./page": "./src/makerkit/page.tsx",
"./image-uploader": "./src/makerkit/image-uploader.tsx",
"./global-loader": "./src/makerkit/global-loader.tsx",
"./auth-change-listener": "./src/makerkit/auth-change-listener.tsx",
"./loading-overlay": "./src/makerkit/loading-overlay.tsx",
"./profile-avatar": "./src/makerkit/profile-avatar.tsx",
"./mode-toggle": "./src/makerkit/mode-toggle.tsx",
@@ -112,21 +134,20 @@
"./enhanced-data-table": "./src/makerkit/data-table.tsx",
"./language-selector": "./src/makerkit/language-selector.tsx",
"./stepper": "./src/makerkit/stepper.tsx",
"./lazy-render": "./src/makerkit/lazy-render.tsx",
"./cookie-banner": "./src/makerkit/cookie-banner.tsx",
"./card-button": "./src/makerkit/card-button.tsx",
"./version-updater": "./src/makerkit/version-updater.tsx",
"./multi-step-form": "./src/makerkit/multi-step-form.tsx",
"./app-breadcrumbs": "./src/makerkit/app-breadcrumbs.tsx",
"./empty-state": "./src/makerkit/empty-state.tsx",
"./marketing": "./src/makerkit/marketing/index.tsx",
"./oauth-provider-logo-image": "./src/makerkit/oauth-provider-logo-image.tsx",
"./file-uploader": "./src/makerkit/file-uploader.tsx"
},
"typesVersions": {
"*": {
"*": [
"src/*"
]
}
"./copy-to-clipboard": "./src/makerkit/copy-to-clipboard.tsx",
"./error-boundary": "./src/makerkit/error-boundary.tsx",
"./hooks/use-async-dialog": "./src/hooks/use-async-dialog.ts",
"./hooks/use-mobile": "./src/hooks/use-mobile.ts",
"./sidebar-navigation": "./src/makerkit/sidebar-navigation.tsx",
"./file-uploader": "./src/makerkit/file-uploader.tsx",
"./use-supabase-upload": "./src/hooks/use-supabase-upload.ts"
}
}

101
packages/ui/src/hooks/use-async-dialog.ts Normal file
View File

@@ -0,0 +1,101 @@
'use client';
import { useCallback, useMemo, useState } from 'react';
interface UseAsyncDialogOptions {
/**
* External controlled open state (optional).
* If not provided, the hook manages its own internal state.
*/
open?: boolean;
/**
* External controlled onOpenChange callback (optional).
* If not provided, the hook manages its own internal state.
*/
onOpenChange?: (open: boolean) => void;
}
interface UseAsyncDialogReturn {
/** Whether the dialog is open */
open: boolean;
/** Guarded setOpen - blocks closure when isPending is true */
setOpen: (open: boolean) => void;
/** Whether an async operation is in progress */
isPending: boolean;
/** Set pending state - call from action callbacks */
setIsPending: (pending: boolean) => void;
/** Props to spread on Dialog component */
dialogProps: {
open: boolean;
onOpenChange: (open: boolean) => void;
disablePointerDismissal: true;
};
}
/**
* Hook for managing dialog state with async operation protection.
*
* Prevents dialog from closing (via Escape or backdrop click) while
* an async operation is in progress.
*
* @example
* ```tsx
* function MyDialog({ open, onOpenChange }) {
* const { dialogProps, isPending, setIsPending } = useAsyncDialog({ open, onOpenChange });
*
* const { execute } = useAction(myAction, {
* onExecute: () => setIsPending(true),
* onSettled: () => setIsPending(false),
* });
*
* return (
* <Dialog {...dialogProps}>
* <Button disabled={isPending}>Submit</Button>
* </Dialog>
* );
* }
* ```
*/
export function useAsyncDialog(
options: UseAsyncDialogOptions = {},
): UseAsyncDialogReturn {
const { open: externalOpen, onOpenChange: externalOnOpenChange } = options;
const [internalOpen, setInternalOpen] = useState(false);
const [isPending, setIsPending] = useState(false);
const isControlled = externalOpen !== undefined;
const open = isControlled ? externalOpen : internalOpen;
const setOpen = useCallback(
(newOpen: boolean) => {
// Block closure during async operation
if (!newOpen && isPending) return;
if (isControlled && externalOnOpenChange) {
externalOnOpenChange(newOpen);
} else {
setInternalOpen(newOpen);
}
},
[isPending, isControlled, externalOnOpenChange],
);
const dialogProps = useMemo(
() =>
({
open,
onOpenChange: setOpen,
disablePointerDismissal: true,
}) as const,
[open, setOpen],
);
return {
open,
setOpen,
isPending,
setIsPending,
dialogProps,
};
}

2
packages/ui/src/hooks/use-mobile.tsx → packages/ui/src/hooks/use-mobile.ts
View File

@@ -1,6 +1,6 @@
import * as React from 'react';
const MOBILE_BREAKPOINT = 1024;
const MOBILE_BREAKPOINT = 768;
export function useIsMobile() {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(

235
packages/ui/src/lib/utils/__tests__/is-route-active.test.ts Normal file
View File

@@ -0,0 +1,235 @@
import { describe, expect, it } from 'vitest';
import { isRouteActive } from '../is-route-active';
describe('isRouteActive', () => {
describe('exact matching', () => {
it('returns true for exact path match', () => {
expect(isRouteActive('/projects', '/projects')).toBe(true);
});
it('returns true for exact path match with trailing slash normalization', () => {
expect(isRouteActive('/projects/', '/projects')).toBe(true);
expect(isRouteActive('/projects', '/projects/')).toBe(true);
});
it('returns true for root path exact match', () => {
expect(isRouteActive('/', '/')).toBe(true);
});
});
describe('prefix matching (default behavior)', () => {
it('returns true when current path is child of nav path', () => {
expect(isRouteActive('/projects', '/projects/123')).toBe(true);
expect(isRouteActive('/projects', '/projects/123/edit')).toBe(true);
expect(isRouteActive('/projects', '/projects/new')).toBe(true);
});
it('returns false when current path is not a child', () => {
expect(isRouteActive('/projects', '/settings')).toBe(false);
expect(isRouteActive('/projects', '/projectslist')).toBe(false); // Not a child, just starts with same chars
});
it('returns false for root path when on other routes', () => {
// Root path should only match exactly, not prefix-match everything
expect(isRouteActive('/', '/projects')).toBe(false);
expect(isRouteActive('/', '/dashboard')).toBe(false);
});
it('handles nested paths correctly', () => {
expect(isRouteActive('/settings/profile', '/settings/profile/edit')).toBe(
true,
);
expect(isRouteActive('/settings/profile', '/settings/billing')).toBe(
false,
);
});
});
describe('custom regex matching (highlightMatch)', () => {
it('uses regex pattern when provided', () => {
// Exact match only pattern
expect(
isRouteActive('/dashboard', '/dashboard/stats', '^/dashboard$'),
).toBe(false);
expect(isRouteActive('/dashboard', '/dashboard', '^/dashboard$')).toBe(
true,
);
});
it('supports multiple paths in regex', () => {
const pattern = '^/(projects|settings/projects)';
expect(isRouteActive('/projects', '/projects', pattern)).toBe(true);
expect(isRouteActive('/projects', '/settings/projects', pattern)).toBe(
true,
);
expect(isRouteActive('/projects', '/settings', pattern)).toBe(false);
});
it('supports complex regex patterns', () => {
// Match any dashboard sub-route
expect(
isRouteActive('/dashboard', '/dashboard/stats', '^/dashboard/'),
).toBe(true);
// Note: Exact match check runs before regex, so '/dashboard' matches '/dashboard'
expect(isRouteActive('/dashboard', '/dashboard', '^/dashboard/')).toBe(
true, // Exact match takes precedence
);
// But different nav path won't match
expect(isRouteActive('/other', '/dashboard', '^/dashboard/')).toBe(false);
});
});
describe('query parameter handling', () => {
it('ignores query parameters in path', () => {
expect(isRouteActive('/projects?tab=active', '/projects')).toBe(true);
expect(isRouteActive('/projects', '/projects?tab=active')).toBe(true);
});
it('ignores query parameters in current path', () => {
expect(isRouteActive('/projects', '/projects/123?view=details')).toBe(
true,
);
});
});
describe('trailing slash handling', () => {
it('normalizes trailing slashes in both paths', () => {
expect(isRouteActive('/projects/', '/projects/')).toBe(true);
expect(isRouteActive('/projects/', '/projects')).toBe(true);
expect(isRouteActive('/projects', '/projects/')).toBe(true);
});
it('handles nested paths with trailing slashes', () => {
expect(isRouteActive('/projects/', '/projects/123/')).toBe(true);
});
});
describe('locale handling', () => {
it('strips locale prefix from paths when locale is provided', () => {
const options = { locale: 'en' };
expect(
isRouteActive('/projects', '/en/projects', undefined, options),
).toBe(true);
expect(
isRouteActive('/projects', '/en/projects/123', undefined, options),
).toBe(true);
});
it('auto-detects locale from path when locales array is provided', () => {
const options = { locales: ['en', 'de', 'fr'] };
expect(
isRouteActive('/projects', '/en/projects', undefined, options),
).toBe(true);
expect(
isRouteActive('/projects', '/de/projects', undefined, options),
).toBe(true);
expect(
isRouteActive('/projects', '/fr/projects/123', undefined, options),
).toBe(true);
});
it('handles case-insensitive locale detection', () => {
// Locale detection is case-insensitive, but stripping requires case match
const options = { locales: ['en', 'de'] };
// These work because locale case matches
expect(
isRouteActive('/projects', '/en/projects', undefined, options),
).toBe(true);
expect(
isRouteActive('/projects', '/de/projects', undefined, options),
).toBe(true);
});
it('does not strip non-locale prefixes', () => {
const options = { locales: ['en', 'de'] };
// 'projects' is not a locale, so shouldn't be stripped
expect(
isRouteActive('/settings', '/projects/settings', undefined, options),
).toBe(false);
});
it('handles locale-only paths', () => {
const options = { locale: 'en' };
expect(isRouteActive('/', '/en', undefined, options)).toBe(true);
expect(isRouteActive('/', '/en/', undefined, options)).toBe(true);
});
});
describe('edge cases', () => {
it('handles empty string path', () => {
expect(isRouteActive('', '/')).toBe(true);
expect(isRouteActive('/', '')).toBe(true);
});
it('handles paths with special characters', () => {
expect(isRouteActive('/user/@me', '/user/@me')).toBe(true);
expect(isRouteActive('/search', '/search?q=hello+world')).toBe(true);
});
it('handles deep nested paths', () => {
expect(isRouteActive('/a/b/c/d', '/a/b/c/d/e/f/g')).toBe(true);
expect(isRouteActive('/a/b/c/d', '/a/b/c')).toBe(false);
});
it('handles similar path prefixes', () => {
// '/project' should not match '/projects'
expect(isRouteActive('/project', '/projects')).toBe(false);
// '/projects' should not match '/project'
expect(isRouteActive('/projects', '/project')).toBe(false);
});
it('handles paths with numbers', () => {
expect(isRouteActive('/org/123', '/org/123/members')).toBe(true);
expect(isRouteActive('/org/123', '/org/456')).toBe(false);
});
});
describe('real-world navigation scenarios', () => {
it('sidebar navigation highlighting', () => {
// Dashboard link should highlight on dashboard and sub-pages
expect(isRouteActive('/dashboard', '/dashboard')).toBe(true);
expect(isRouteActive('/dashboard', '/dashboard/analytics')).toBe(true);
expect(isRouteActive('/dashboard', '/settings')).toBe(false);
// Projects link should highlight on projects list and detail pages
expect(isRouteActive('/projects', '/projects')).toBe(true);
expect(isRouteActive('/projects', '/projects/proj-1')).toBe(true);
expect(isRouteActive('/projects', '/projects/proj-1/tasks')).toBe(true);
// Home link should only highlight on home
expect(isRouteActive('/', '/')).toBe(true);
expect(isRouteActive('/', '/projects')).toBe(false);
});
it('settings navigation with nested routes', () => {
// Settings general
expect(isRouteActive('/settings', '/settings')).toBe(true);
expect(isRouteActive('/settings', '/settings/profile')).toBe(true);
expect(isRouteActive('/settings', '/settings/billing')).toBe(true);
// Settings profile specifically
expect(isRouteActive('/settings/profile', '/settings/profile')).toBe(
true,
);
expect(isRouteActive('/settings/profile', '/settings/billing')).toBe(
false,
);
});
it('organization routes with dynamic segments', () => {
expect(
isRouteActive('/org/[slug]', '/org/my-org', undefined, undefined),
).toBe(false); // Template path won't match
expect(isRouteActive('/org/my-org', '/org/my-org/settings')).toBe(true);
});
});
});

172
packages/ui/src/lib/utils/is-route-active.ts
View File

@@ -1,108 +1,128 @@
const ROOT_PATH = '/';
export type RouteActiveOptions = {
locale?: string;
locales?: string[];
};
/**
* @name isRouteActive
* @description A function to check if a route is active. This is used to
* @param end
* @param path
* @param currentPath
* @description Check if a route is active for navigation highlighting.
*
* Default behavior: prefix matching (highlights parent when on child routes)
* Custom behavior: provide a regex pattern via highlightMatch
*
* @param path - The navigation item's path
* @param currentPath - The current browser path
* @param highlightMatch - Optional regex pattern for custom matching
* @param options - Locale options for path normalization
*
* @example
* // Default: /projects highlights for /projects, /projects/123, /projects/123/edit
* isRouteActive('/projects', '/projects/123') // true
*
* // Exact match only
* isRouteActive('/dashboard', '/dashboard/stats', '^/dashboard$') // false
*
* // Multiple paths
* isRouteActive('/projects', '/settings/projects', '^/(projects|settings/projects)') // true
*/
export function isRouteActive(
path: string,
currentPath: string,
end?: boolean | ((path: string) => boolean),
highlightMatch?: string,
options?: RouteActiveOptions,
) {
// if the path is the same as the current path, we return true
if (path === currentPath) {
const locale =
options?.locale ?? detectLocaleFromPath(currentPath, options?.locales);
const normalizedPath = normalizePath(path, { ...options, locale });
const normalizedCurrentPath = normalizePath(currentPath, {
...options,
locale,
});
// Exact match always returns true
if (normalizedPath === normalizedCurrentPath) {
return true;
}
// if the end prop is a function, we call it with the current path
if (typeof end === 'function') {
return !end(currentPath);
// Custom regex match
if (highlightMatch) {
const regex = new RegExp(highlightMatch);
return regex.test(normalizedCurrentPath);
}
// otherwise - we use the evaluateIsRouteActive function
const defaultEnd = end ?? true;
const oneLevelDeep = 1;
const threeLevelsDeep = 3;
// how far down should segments be matched?
const depth = defaultEnd ? oneLevelDeep : threeLevelsDeep;
return checkIfRouteIsActive(path, currentPath, depth);
}
/**
* @name checkIfRouteIsActive
* @description A function to check if a route is active. This is used to
* highlight the active link in the navigation.
* @param targetLink - The link to check against
* @param currentRoute - the current route
* @param depth - how far down should segments be matched?
*/
export function checkIfRouteIsActive(
targetLink: string,
currentRoute: string,
depth = 1,
) {
// we remove any eventual query param from the route's URL
const currentRoutePath = currentRoute.split('?')[0] ?? '';
if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
// Default: prefix matching - highlight when current path starts with nav path
// Special case: root path should only match exactly
if (normalizedPath === ROOT_PATH) {
return false;
}
if (!currentRoutePath.includes(targetLink)) {
return false;
}
const isSameRoute = targetLink === currentRoutePath;
if (isSameRoute) {
return true;
}
return hasMatchingSegments(targetLink, currentRoutePath, depth);
return (
normalizedCurrentPath.startsWith(normalizedPath + '/') ||
normalizedCurrentPath === normalizedPath
);
}
function splitIntoSegments(href: string) {
return href.split('/').filter(Boolean);
}
function hasMatchingSegments(
targetLink: string,
currentRoute: string,
depth: number,
) {
const segments = splitIntoSegments(targetLink);
const matchingSegments = numberOfMatchingSegments(currentRoute, segments);
function normalizePath(path: string, options?: RouteActiveOptions) {
const [pathname = ROOT_PATH] = path.split('?');
const normalizedPath =
pathname.length > 1 && pathname.endsWith('/')
? pathname.slice(0, -1)
: pathname || ROOT_PATH;
if (targetLink === currentRoute) {
return true;
if (!options?.locale && !options?.locales?.length) {
return normalizedPath || ROOT_PATH;
}
// how far down should segments be matched?
// - if depth = 1 => only highlight the links of the immediate parent
// - if depth = 2 => for url = /account match /account/organization/members
return matchingSegments > segments.length - (depth - 1);
}
const locale =
options?.locale ?? detectLocaleFromPath(normalizedPath, options?.locales);
function numberOfMatchingSegments(href: string, segments: string[]) {
let count = 0;
for (const segment of splitIntoSegments(href)) {
// for as long as the segments match, keep counting + 1
if (segments.includes(segment)) {
count += 1;
} else {
return count;
}
if (!locale || !hasLocalePrefix(normalizedPath, locale)) {
return normalizedPath || ROOT_PATH;
}
return count;
return stripLocalePrefix(normalizedPath, locale);
}
function isRoot(path: string) {
return path === ROOT_PATH;
function detectLocaleFromPath(
path: string,
locales: string[] | undefined,
): string | undefined {
if (!locales?.length) {
return undefined;
}
const [firstSegment] = splitIntoSegments(path);
if (!firstSegment) {
return undefined;
}
return locales.find(
(locale) => locale.toLowerCase() === firstSegment.toLowerCase(),
);
}
function hasLocalePrefix(path: string, locale: string) {
return path === `/${locale}` || path.startsWith(`/${locale}/`);
}
function stripLocalePrefix(path: string, locale: string) {
if (!hasLocalePrefix(path, locale)) {
return path || ROOT_PATH;
}
const withoutPrefix = path.slice(locale.length + 1);
if (!withoutPrefix) {
return ROOT_PATH;
}
return withoutPrefix.startsWith('/') ? withoutPrefix : `/${withoutPrefix}`;
}

39
packages/ui/src/makerkit/app-breadcrumbs.tsx
View File

@@ -3,7 +3,7 @@
import { Fragment } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useParams, usePathname } from 'next/navigation';
import {
Breadcrumb,
@@ -23,7 +23,14 @@ export function AppBreadcrumbs(props: {
maxDepth?: number;
}) {
const pathName = usePathname();
const splitPath = pathName.split('/').filter(Boolean);
const { locale } = useParams();
// Remove the locale from the path
const splitPath = pathName
.split('/')
.filter(Boolean)
.filter((path) => path !== locale);
const values = props.values ?? {};
const maxDepth = props.maxDepth ?? 6;
@@ -48,7 +55,7 @@ export function AppBreadcrumbs(props: {
values[path]
) : (
<Trans
i18nKey={`common:routes.${unslugify(path)}`}
i18nKey={`common.routes.${unslugify(path)}`}
defaults={unslugify(path)}
/>
);
@@ -60,18 +67,20 @@ export function AppBreadcrumbs(props: {
condition={index < visiblePaths.length - 1}
fallback={label}
>
<BreadcrumbLink asChild>
<Link
href={
'/' +
splitPath
.slice(0, splitPath.indexOf(path) + 1)
.join('/')
}
>
{label}
</Link>
</BreadcrumbLink>
<BreadcrumbLink
render={
<Link
href={
'/' +
splitPath
.slice(0, splitPath.indexOf(path) + 1)
.join('/')
}
>
{label}
</Link>
}
/>
</If>
</BreadcrumbItem>

17
packages/ui/src/makerkit/authenticity-token.tsx
View File

@@ -1,17 +0,0 @@
'use client';
export function AuthenticityToken() {
const token = useCsrfToken();
return <input type="hidden" name="csrf_token" value={token} />;
}
function useCsrfToken() {
if (typeof window === 'undefined') return '';
return (
document
.querySelector('meta[name="csrf-token"]')
?.getAttribute('content') ?? ''
);
}

54
packages/ui/src/makerkit/bordered-navigation-menu.tsx
View File

@@ -3,6 +3,8 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useLocale } from 'next-intl';
import { cn, isRouteActive } from '../lib/utils';
import { Button } from '../shadcn/button';
import {
@@ -25,44 +27,48 @@ export function BorderedNavigationMenu(props: React.PropsWithChildren) {
export function BorderedNavigationMenuItem(props: {
path: string;
label: React.ReactNode | string;
end?: boolean | ((path: string) => boolean);
highlightMatch?: string;
active?: boolean;
className?: string;
buttonClassName?: string;
}) {
const locale = useLocale();
const pathname = usePathname();
const active = props.active ?? isRouteActive(props.path, pathname, props.end);
const active =
props.active ??
isRouteActive(props.path, pathname, props.highlightMatch, { locale });
return (
<NavigationMenuItem className={props.className}>
<Button
asChild
nativeButton={false}
render={
<Link
href={props.path}
className={cn('text-sm', {
'text-secondary-foreground': active,
'text-secondary-foreground/80 hover:text-secondary-foreground':
!active,
})}
/>
}
variant={'ghost'}
className={cn('relative active:shadow-xs', props.buttonClassName)}
>
<Link
href={props.path}
className={cn('text-sm', {
'text-secondary-foreground': active,
'text-secondary-foreground/80 hover:text-secondary-foreground':
!active,
})}
>
{typeof props.label === 'string' ? (
<Trans i18nKey={props.label} defaults={props.label} />
) : (
props.label
)}
{typeof props.label === 'string' ? (
<Trans i18nKey={props.label} defaults={props.label} />
) : (
props.label
)}
{active ? (
<span
className={cn(
'bg-primary animate-in fade-in zoom-in-90 absolute -bottom-2.5 left-0 h-0.5 w-full',
)}
/>
) : null}
</Link>
{active ? (
<span
className={cn(
'bg-primary animate-in fade-in zoom-in-90 absolute -bottom-2.5 left-0 h-0.5 w-full',
)}
/>
) : null}
</Button>
</NavigationMenuItem>
);

147
packages/ui/src/makerkit/card-button.tsx
View File

@@ -1,117 +1,122 @@
import * as React from 'react';
import { cn } from '#utils';
import { useRender } from '@base-ui/react/use-render';
import { ChevronRight } from 'lucide-react';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils';
export const CardButton: React.FC<
{
asChild?: boolean;
render?: React.ReactElement;
className?: string;
children: React.ReactNode;
children?: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
> = function CardButton({ className, asChild, ...props }) {
const Comp = asChild ? Slot.Root : 'button';
return (
<Comp
className={cn(
> = function CardButton({ className, render, children, ...props }) {
return useRender({
render,
defaultTagName: 'button',
props: {
...props,
className: cn(
'group hover:bg-secondary/20 active:bg-secondary active:bg-secondary/50 dark:shadow-primary/20 relative flex h-36 flex-col rounded-lg border transition-all hover:shadow-xs active:shadow-lg',
className,
)}
{...props}
>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
),
children,
},
});
};
export const CardButtonTitle: React.FC<
{
asChild?: boolean;
render?: React.ReactElement;
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonTitle({ className, asChild, ...props }) {
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
className={cn(
> = function CardButtonTitle({ className, render, children, ...props }) {
return useRender({
render,
defaultTagName: 'div',
props: {
...props,
className: cn(
className,
'text-muted-foreground group-hover:text-secondary-foreground align-super text-sm font-medium transition-colors',
)}
{...props}
>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
'text-muted-foreground group-hover:text-secondary-foreground text-left align-super text-sm font-medium transition-colors',
),
children,
},
});
};
export const CardButtonHeader: React.FC<
{
children: React.ReactNode;
asChild?: boolean;
render?: React.ReactElement;
displayArrow?: boolean;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonHeader({
className,
asChild,
render,
displayArrow = true,
children,
...props
}) {
const Comp = asChild ? Slot.Root : 'div';
const content = (
<>
{children}
return (
<Comp className={cn(className, 'p-4')} {...props}>
<Slot.Slottable>
{props.children}
<ChevronRight
className={cn(
'text-muted-foreground group-hover:text-secondary-foreground absolute top-4 right-2 h-4 transition-colors',
{
hidden: !displayArrow,
},
)}
/>
</Slot.Slottable>
</Comp>
<ChevronRight
className={cn(
'text-muted-foreground group-hover:text-secondary-foreground absolute top-4 right-2 h-4 transition-colors',
{
hidden: !displayArrow,
},
)}
/>
</>
);
return useRender({
render,
defaultTagName: 'div',
props: {
...props,
className: cn(className, 'p-4'),
children: content,
},
});
};
export const CardButtonContent: React.FC<
{
asChild?: boolean;
render?: React.ReactElement;
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonContent({ className, asChild, ...props }) {
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp className={cn(className, 'flex flex-1 flex-col px-4')} {...props}>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
> = function CardButtonContent({ className, render, children, ...props }) {
return useRender({
render,
defaultTagName: 'div',
props: {
...props,
className: cn(className, 'flex flex-1 flex-col px-4'),
children,
},
});
};
export const CardButtonFooter: React.FC<
{
asChild?: boolean;
render?: React.ReactElement;
children: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>
> = function CardButtonFooter({ className, asChild, ...props }) {
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
className={cn(
> = function CardButtonFooter({ className, render, children, ...props }) {
return useRender({
render,
defaultTagName: 'div',
props: {
...props,
className: cn(
className,
'mt-auto flex h-0 w-full flex-col justify-center border-t px-4',
)}
{...props}
>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
),
children,
},
});
};

33
packages/ui/src/makerkit/cookie-banner.tsx
View File

@@ -2,11 +2,9 @@
import { useCallback, useMemo, useState } from 'react';
import dynamic from 'next/dynamic';
import { Dialog as DialogPrimitive } from 'radix-ui';
import { Button } from '../shadcn/button';
import { Dialog, DialogContent } from '../shadcn/dialog';
import { Heading } from '../shadcn/heading';
import { Trans } from './trans';
// configure this as you wish
@@ -18,11 +16,7 @@ enum ConsentStatus {
Unknown = 'unknown',
}
export const CookieBanner = dynamic(async () => CookieBannerComponent, {
ssr: false,
});
export function CookieBannerComponent() {
export function CookieBanner() {
const { status, accept, reject } = useCookieConsent();
if (!isBrowser()) {
@@ -34,16 +28,17 @@ export function CookieBannerComponent() {
}
return (
<DialogPrimitive.Root open modal={false}>
<DialogPrimitive.Content
onOpenAutoFocus={(e) => e.preventDefault()}
className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 z-50 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
<Dialog open modal={false}>
<DialogContent
className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
>
<DialogPrimitive.Title className="text-lg font-semibold">
<Trans i18nKey={'cookieBanner.title'} />
</DialogPrimitive.Title>
<div className={'flex flex-col space-y-4'}>
<div>
<Heading level={3}>
<Trans i18nKey={'cookieBanner.title'} />
</Heading>
</div>
<div className={'text-gray-500 dark:text-gray-400'}>
<Trans i18nKey={'cookieBanner.description'} />
</div>
@@ -58,8 +53,8 @@ export function CookieBannerComponent() {
</Button>
</div>
</div>
</DialogPrimitive.Content>
</DialogPrimitive.Root>
</DialogContent>
</Dialog>
);
}

77
packages/ui/src/makerkit/copy-to-clipboard.tsx Normal file
View File

@@ -0,0 +1,77 @@
'use client';
import { ReactNode, useCallback, useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { cn } from '../lib/utils';
import { toast } from '../shadcn/sonner';
interface CopyToClipboardProps {
children: ReactNode;
value?: string;
className?: string;
tooltipText?: string;
successMessage?: string;
errorMessage?: string;
}
/**
* A component that copies text to clipboard when clicked
*/
export function CopyToClipboard({
children,
className,
value = undefined,
tooltipText = 'Copy to clipboard',
successMessage = 'Copied to clipboard',
errorMessage = 'Failed to copy to clipboard',
}: CopyToClipboardProps) {
const [copied, setCopied] = useState(false);
const handleCopy = useCallback(
(e: React.MouseEvent<HTMLSpanElement>) => {
e.stopPropagation();
const textToCopy = children?.toString() || '';
navigator.clipboard
.writeText(value ?? textToCopy)
.then(() => {
setCopied(true);
toast.success(successMessage);
setTimeout(() => setCopied(false), 2000);
})
.catch((error) => {
console.error('Failed to copy text: ', error);
toast.error(errorMessage);
});
},
[children, value, successMessage, errorMessage],
);
if (typeof value === 'undefined') {
return children;
}
return (
<button
title={tooltipText}
onClick={handleCopy}
className={cn(
'group group/button -mx-1 inline-flex cursor-pointer items-center gap-1 rounded px-1 transition-colors hover:underline',
className,
)}
>
{children}
<span className="text-muted-foreground transition-opacity">
{copied ? (
<Check className="h-3.5 w-3.5 text-green-500" />
) : (
<Copy className="h-3.5 w-3.5" />
)}
</span>
</button>
);
}

6
packages/ui/src/makerkit/data-table.tsx
View File

@@ -295,7 +295,7 @@ export function DataTable<RecordData extends DataItem>({
return (
<div className="flex h-full flex-1 flex-col">
<Table
data-testid="data-table"
data-testidid="data-table"
{...tableProps}
className={cn(
'bg-background border-collapse border-spacing-0',
@@ -493,7 +493,7 @@ export function DataTable<RecordData extends DataItem>({
<If condition={rows.length === 0}>
<div className={'flex flex-1 flex-col items-center p-8'}>
<span className="text-muted-foreground text-center text-sm">
{noResultsMessage || <Trans i18nKey={'common:noData'} />}
{noResultsMessage || <Trans i18nKey={'common.noData'} />}
</span>
</div>
</If>
@@ -544,7 +544,7 @@ function Pagination<T>({
<div className="flex items-center space-x-4">
<span className="text-muted-foreground flex items-center text-xs">
<Trans
i18nKey={'common:pageOfPages'}
i18nKey={'common.pageOfPages'}
values={{
page: currentPageIndex + 1,
total: table.getPageCount(),

30
packages/ui/src/makerkit/dropzone.tsx
View File

@@ -8,7 +8,7 @@ import {
} from 'react';
import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useTranslations } from 'next-intl';
import { type UseSupabaseUploadReturn } from '../hooks/use-supabase-upload';
import { cn } from '../lib/utils';
@@ -97,7 +97,7 @@ const DropzoneContent = ({ className }: { className?: string }) => {
isSuccess,
} = useDropzoneContext();
const { t } = useTranslation();
const t = useTranslations();
const exceedMaxFiles = files.length > maxFiles;
@@ -120,7 +120,7 @@ const DropzoneContent = ({ className }: { className?: string }) => {
<p className="text-primary text-sm">
<Trans
i18nKey="common:dropzone.success"
i18nKey="common.dropzone.success"
values={{ count: files.length }}
/>
</p>
@@ -165,7 +165,7 @@ const DropzoneContent = ({ className }: { className?: string }) => {
{file.errors
.map((e) =>
e.message.startsWith('File is larger than')
? t('common:dropzone.errorMessageFileSizeTooLarge', {
? t('common.dropzone.errorMessageFileSizeTooLarge', {
size: formatBytes(file.size, 2),
maxSize: formatBytes(maxFileSize, 2),
})
@@ -175,18 +175,18 @@ const DropzoneContent = ({ className }: { className?: string }) => {
</p>
) : loading && !isSuccessfullyUploaded ? (
<p className="text-muted-foreground text-xs">
<Trans i18nKey="common:dropzone.uploading" />
<Trans i18nKey="common.dropzone.uploading" />
</p>
) : fileError ? (
<p className="text-destructive text-xs">
<Trans
i18nKey="common:dropzone.errorMessage"
i18nKey="common.dropzone.errorMessage"
values={{ message: fileError.message }}
/>
</p>
) : isSuccessfullyUploaded ? (
<p className="text-primary text-xs">
<Trans i18nKey="common:dropzone.success" />
<Trans i18nKey="common.dropzone.success" />
</p>
) : (
<p className="text-muted-foreground text-xs">
@@ -211,7 +211,7 @@ const DropzoneContent = ({ className }: { className?: string }) => {
{exceedMaxFiles && (
<p className="text-destructive mt-2 text-left text-sm">
<Trans
i18nKey="common:dropzone.errorMaxFiles"
i18nKey="common.dropzone.errorMaxFiles"
values={{ count: maxFiles, files: files.length - maxFiles }}
/>
</p>
@@ -226,14 +226,14 @@ const DropzoneContent = ({ className }: { className?: string }) => {
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
<Trans i18nKey="common:dropzone.uploading" />
<Trans i18nKey="common.dropzone.uploading" />
</>
) : (
<span className="flex items-center">
<Upload size={20} className="mr-2 h-4 w-4" />
<Trans
i18nKey="common:dropzone.uploadFiles"
i18nKey="common.dropzone.uploadFiles"
values={{
count: files.length,
}}
@@ -260,30 +260,30 @@ const DropzoneEmptyState = ({ className }: { className?: string }) => {
<p className="text-sm">
<Trans
i18nKey="common:dropzone.uploadFiles"
i18nKey="common.dropzone.uploadFiles"
values={{ count: maxFiles }}
/>
</p>
<div className="flex flex-col items-center gap-y-1">
<p className="text-muted-foreground text-xs">
<Trans i18nKey="common:dropzone.dragAndDrop" />{' '}
<Trans i18nKey="common.dropzone.dragAndDrop" />{' '}
<a
onClick={() => inputRef.current?.click()}
className="hover:text-foreground cursor-pointer underline transition"
>
<Trans
i18nKey="common:dropzone.select"
i18nKey="common.dropzone.select"
values={{ count: maxFiles === 1 ? `file` : 'files' }}
/>
</a>{' '}
<Trans i18nKey="common:dropzone.toUpload" />
<Trans i18nKey="common.dropzone.toUpload" />
</p>
{maxFileSize !== Number.POSITIVE_INFINITY && (
<p className="text-muted-foreground text-xs">
<Trans
i18nKey="common:dropzone.maxFileSize"
i18nKey="common.dropzone.maxFileSize"
values={{ size: formatBytes(maxFileSize, 2) }}
/>
</p>

35
packages/ui/src/makerkit/error-boundary.tsx Normal file
View File

@@ -0,0 +1,35 @@
'use client';
import { Component, ErrorInfo, ReactNode } from 'react';
interface Props {
children?: ReactNode;
fallback: ReactNode;
}
interface State {
hasError: boolean;
}
export class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
};
public static getDerivedStateFromError(_: Error): State {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Uncaught error:', error, errorInfo);
}
public render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}

2
packages/ui/src/makerkit/image-uploader.tsx
View File

@@ -92,7 +92,7 @@ export function ImageUploader(
<div>
<Button onClick={onClear} size={'sm'} variant={'ghost'}>
<Trans i18nKey={'common:clear'} />
<Trans i18nKey={'common.clear'} />
</Button>
</div>
</div>

107
packages/ui/src/makerkit/language-selector.tsx
View File

@@ -1,8 +1,10 @@
'use client';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo, useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocale } from 'next-intl';
import { usePathname, useRouter } from '@kit/i18n/navigation';
import {
Select,
@@ -12,60 +14,61 @@ import {
SelectValue,
} from '../shadcn/select';
export function LanguageSelector({
onChange,
}: {
interface LanguageSelectorProps {
locales?: string[];
onChange?: (locale: string) => unknown;
}) {
const { i18n } = useTranslation();
const { language: currentLanguage, options } = i18n;
}
const locales = (options.supportedLngs as string[]).filter(
(locale) => locale.toLowerCase() !== 'cimode',
);
const DEFAULT_STRATEGY = 'path';
export function LanguageSelector({
locales = [],
onChange,
}: LanguageSelectorProps) {
const currentLocale = useLocale();
const handleChangeLocale = useChangeLocale();
const [value, setValue] = useState(currentLocale);
const languageNames = useMemo(() => {
return new Intl.DisplayNames([currentLanguage], {
return new Intl.DisplayNames([currentLocale], {
type: 'language',
});
}, [currentLanguage]);
const [value, setValue] = useState(i18n.language);
}, [currentLocale]);
const languageChanged = useCallback(
async (locale: string) => {
(locale: string | null) => {
if (!locale) return;
setValue(locale);
if (onChange) {
onChange(locale);
}
await i18n.changeLanguage(locale);
// refresh cached translations
window.location.reload();
handleChangeLocale(locale);
},
[i18n, onChange],
[onChange, handleChangeLocale],
);
if (locales.length <= 1) {
return null;
}
return (
<Select value={value} onValueChange={languageChanged}>
<SelectTrigger>
<SelectValue />
<SelectValue className="capitalize">
{(value) => (value ? languageNames.of(value) : value)}
</SelectValue>
</SelectTrigger>
<SelectContent>
{locales.map((locale) => {
const label = capitalize(languageNames.of(locale) ?? locale);
const option = {
value: locale,
label,
};
const label = languageNames.of(locale) ?? locale;
return (
<SelectItem value={option.value} key={option.value}>
{option.label}
<SelectItem value={locale} key={locale} className="capitalize">
{label}
</SelectItem>
);
})}
@@ -74,6 +77,46 @@ export function LanguageSelector({
);
}
function capitalize(lang: string) {
return lang.slice(0, 1).toUpperCase() + lang.slice(1);
function useChangeLocale(strategy: `cookie` | `path` = DEFAULT_STRATEGY) {
const changeLocaleViaPath = useChangeLocaleViaPath();
const changeLocaleViaCookie = useChangeLocaleViaCookie();
return useCallback(
(locale: string) => {
switch (strategy) {
case 'cookie':
return changeLocaleViaCookie(locale);
case 'path':
return changeLocaleViaPath(locale);
}
},
[strategy, changeLocaleViaCookie, changeLocaleViaPath],
);
}
function useChangeLocaleViaCookie() {
const router = useRouter();
return useCallback(
(locale: string) => {
document.cookie = `lang=${locale}; Path=/; SameSite=Lax`;
router.refresh();
},
[router],
);
}
function useChangeLocaleViaPath() {
const pathname = usePathname();
const router = useRouter();
const [, startTransition] = useTransition();
return useCallback(
(locale: string) => {
startTransition(() => {
router.replace(pathname, { locale });
});
},
[router, pathname],
);
}

17
packages/ui/src/makerkit/marketing/cta-button.tsx
View File

@@ -2,18 +2,15 @@ import { cn } from '../../lib/utils';
import { Button } from '../../shadcn/button';
export const CtaButton: React.FC<React.ComponentProps<typeof Button>> =
function CtaButtonComponent({ className, children, ...props }) {
function CtaButtonComponent({ className, children, render, ...props }) {
return (
<Button
className={cn(
'h-12 rounded-xl px-4 text-base font-semibold',
className,
{
['dark:shadow-primary/30 transition-all hover:shadow-2xl']:
props.variant === 'default' || !props.variant,
},
)}
asChild
size="lg"
className={cn(className, {
['dark:shadow-primary/30 transition-all hover:shadow-xl']:
props.variant === 'default' || !props.variant,
})}
render={render}
{...props}
>
{children}

32
packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx
View File

@@ -1,23 +1,27 @@
import { Slot } from 'radix-ui';
import { useRender } from '@base-ui/react/use-render';
import { cn } from '../../lib/utils';
export const GradientSecondaryText: React.FC<
React.HTMLAttributes<HTMLSpanElement> & {
asChild?: boolean;
render?: React.ReactElement;
}
> = function GradientSecondaryTextComponent({ className, ...props }) {
const Comp = props.asChild ? Slot.Root : 'span';
return (
<Comp
className={cn(
> = function GradientSecondaryTextComponent({
className,
render,
children,
...props
}) {
return useRender({
render,
defaultTagName: 'span',
props: {
...props,
className: cn(
'dark:from-foreground/60 dark:to-foreground text-secondary-foreground dark:bg-linear-to-r dark:bg-clip-text dark:text-transparent',
className,
)}
{...props}
>
<Slot.Slottable>{props.children}</Slot.Slottable>
</Comp>
);
),
children,
},
});
};

35
packages/ui/src/makerkit/marketing/header.tsx
View File

@@ -1,9 +1,11 @@
import { cn } from '../../lib/utils';
import { If } from '../if';
interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
logo?: React.ReactNode;
navigation?: React.ReactNode;
actions?: React.ReactNode;
centered?: boolean;
}
export const Header: React.FC<HeaderProps> = function ({
@@ -11,8 +13,19 @@ export const Header: React.FC<HeaderProps> = function ({
logo,
navigation,
actions,
centered = true,
...props
}) {
const grids = {
1: 'grid-cols-1',
2: 'grid-cols-2',
3: 'grid-cols-3',
};
const gridAmount = [logo, navigation, actions].filter(Boolean).length;
const gridClassName = grids[gridAmount as keyof typeof grids];
return (
<div
className={cn(
@@ -21,11 +34,23 @@ export const Header: React.FC<HeaderProps> = function ({
)}
{...props}
>
<div className="container">
<div className="grid h-14 grid-cols-3 items-center">
<div className={'mx-auto md:mx-0'}>{logo}</div>
<div className="order-first md:order-none">{navigation}</div>
<div className="flex items-center justify-end gap-x-2">{actions}</div>
<div
className={cn({
'container mx-auto': centered,
})}
>
<div className={cn('grid h-14 items-center', gridClassName)}>
{logo}
<If condition={navigation}>
<div className="order-first md:order-none">{navigation}</div>
</If>
<If condition={actions}>
<div className="flex items-center justify-end gap-x-2">
{actions}
</div>
</If>
</div>
</div>
</div>

27
packages/ui/src/makerkit/marketing/hero-title.tsx
View File

@@ -1,23 +1,22 @@
import { Slot } from 'radix-ui';
import { useRender } from '@base-ui/react/use-render';
import { cn } from '../../lib/utils';
export const HeroTitle: React.FC<
React.HTMLAttributes<HTMLHeadingElement> & {
asChild?: boolean;
render?: React.ReactElement;
}
> = function HeroTitleComponent({ children, className, ...props }) {
const Comp = props.asChild ? Slot.Root : 'h1';
return (
<Comp
className={cn(
> = function HeroTitleComponent({ children, className, render, ...props }) {
return useRender({
render,
defaultTagName: 'h1',
props: {
...props,
className: cn(
'hero-title flex flex-col text-center font-sans text-4xl font-medium tracking-tighter sm:text-6xl lg:max-w-5xl lg:text-7xl xl:max-w-6xl dark:text-white',
className,
)}
{...props}
>
<Slot.Slottable>{children}</Slot.Slottable>
</Comp>
);
),
children,
},
});
};

4
packages/ui/src/makerkit/marketing/hero.tsx
View File

@@ -52,9 +52,9 @@ export function Hero({
{subtitle && (
<div className="flex max-w-3xl">
<h3 className="text-secondary-foreground/70 p-0 text-center font-sans text-xl font-medium tracking-tight">
<h2 className="text-secondary-foreground/70 p-0 text-center font-sans text-xl font-medium tracking-tight">
{subtitle}
</h3>
</h2>
</div>
)}
</div>

14
packages/ui/src/makerkit/marketing/newsletter-signup.tsx
View File

@@ -2,7 +2,7 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import * as z from 'zod';
import { cn } from '../../lib/utils';
import { Button } from '../../shadcn/button';
@@ -16,10 +16,10 @@ import {
import { Input } from '../../shadcn/input';
const NewsletterFormSchema = z.object({
email: z.string().email('Please enter a valid email address'),
email: z.email(),
});
type NewsletterFormValues = z.infer<typeof NewsletterFormSchema>;
type NewsletterFormValues = z.output<typeof NewsletterFormSchema>;
interface NewsletterSignupProps extends React.HTMLAttributes<HTMLDivElement> {
onSignup: (data: NewsletterFormValues) => void;
@@ -49,13 +49,13 @@ export function NewsletterSignup({
className="flex flex-col gap-y-3"
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder={placeholder} {...field} />
</FormControl>
<FormControl
render={<Input placeholder={placeholder} {...field} />}
/>
<FormMessage />
</FormItem>
)}

82
packages/ui/src/makerkit/marketing/pill.tsx
View File

@@ -1,4 +1,6 @@
import { Slot } from 'radix-ui';
'use client';
import { useRender } from '@base-ui/react/use-render';
import { cn } from '../../lib/utils';
import { GradientSecondaryText } from './gradient-secondary-text';
@@ -6,54 +8,58 @@ import { GradientSecondaryText } from './gradient-secondary-text';
export const Pill: React.FC<
React.HTMLAttributes<HTMLHeadingElement> & {
label?: React.ReactNode;
asChild?: boolean;
render?: React.ReactElement;
}
> = function PillComponent({ className, asChild, ...props }) {
const Comp = asChild ? Slot.Root : 'h3';
return (
<Comp
className={cn(
'flex min-h-9 items-center gap-x-1.5 rounded-full border px-1.5 py-1 text-center text-sm font-medium text-transparent',
className,
)}
{...props}
>
{props.label && (
> = function PillComponent({ className, render, label, children, ...props }) {
const content = (
<>
{label && (
<span
className={
'text-primary-foreground bg-primary rounded-2xl border px-1.5 py-1.5 text-xs font-bold tracking-tight'
'text-primary-foreground bg-primary rounded-2xl border px-1.5 py-0.5 text-xs font-bold tracking-tight'
}
>
{props.label}
{label}
</span>
)}
<Slot.Slottable>
<GradientSecondaryText
className={'flex items-center gap-x-2 font-semibold tracking-tight'}
>
{props.children}
</GradientSecondaryText>
</Slot.Slottable>
</Comp>
<GradientSecondaryText
className={'flex items-center gap-x-2 font-semibold tracking-tight'}
>
{children}
</GradientSecondaryText>
</>
);
return useRender({
render,
defaultTagName: 'h3',
props: {
...props,
className: cn(
'bg-muted/50 flex min-h-10 items-center gap-x-1.5 rounded-full border px-2 py-1 text-center text-sm font-medium text-transparent',
className,
),
children: content,
},
});
};
export const PillActionButton: React.FC<
React.HTMLAttributes<HTMLButtonElement> & {
asChild?: boolean;
render?: React.ReactElement;
}
> = ({ asChild, ...props }) => {
const Comp = asChild ? Slot.Root : 'button';
return (
<Comp
{...props}
className={
'text-secondary-foreground bg-input active:bg-primary active:text-primary-foreground hover:ring-muted-foreground/50 rounded-full px-1.5 py-1.5 text-center text-sm font-medium ring ring-transparent transition-colors'
}
>
{props.children}
</Comp>
);
> = ({ render, children, className, ...props }) => {
return useRender({
render,
defaultTagName: 'button',
props: {
...props,
className: cn(
'text-secondary-foreground bg-input active:bg-primary active:text-primary-foreground hover:ring-muted-foreground/50 rounded-full px-1.5 py-1.5 text-center text-sm font-medium ring ring-transparent transition-colors',
className,
),
children,
'aria-label': 'Action button',
},
});
};

4
packages/ui/src/makerkit/mobile-mode-toggle.tsx
View File

@@ -31,7 +31,5 @@ export function MobileModeToggle(props: { className?: string }) {
}
function setCookieTheme(theme: string) {
const secure =
typeof window !== 'undefined' && window.location.protocol === 'https:';
document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure ? '; Secure' : ''}`;
document.cookie = `theme=${theme}; path=/; max-age=31536000`;
}

72
packages/ui/src/makerkit/mobile-navigation-dropdown.tsx
View File

@@ -1,72 +0,0 @@
'use client';
import { useMemo } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronDown } from 'lucide-react';
import { Button } from '../shadcn/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '../shadcn/dropdown-menu';
import { Trans } from './trans';
function MobileNavigationDropdown({
links,
}: {
links: {
path: string;
label: string;
}[];
}) {
const path = usePathname();
const currentPathName = useMemo(() => {
return Object.values(links).find((link) => link.path === path)?.label;
}, [links, path]);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={'secondary'} className={'w-full'}>
<span
className={'flex w-full items-center justify-between space-x-2'}
>
<span>
<Trans i18nKey={currentPathName} defaults={currentPathName} />
</span>
<ChevronDown className={'h-5'} />
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className={
'dark:divide-dark-700 w-screen divide-y divide-gray-100' +
' rounded-none'
}
>
{Object.values(links).map((link) => {
return (
<DropdownMenuItem asChild key={link.path}>
<Link
className={'flex h-12 w-full items-center'}
href={link.path}
>
<Trans i18nKey={link.label} defaults={link.label} />
</Link>
</DropdownMenuItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
}
export default MobileNavigationDropdown;

77
packages/ui/src/makerkit/mobile-navigation-menu.tsx
View File

@@ -1,77 +0,0 @@
'use client';
import { useMemo } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronDown } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '../shadcn/dropdown-menu';
import { Trans } from './trans';
function MobileNavigationDropdown({
links,
}: {
links: {
path: string;
label: string;
}[];
}) {
const path = usePathname();
const items = useMemo(
function MenuItems() {
return Object.values(links).map((link) => {
return (
<DropdownMenuItem key={link.path}>
<Link
className={'flex h-full w-full items-center'}
href={link.path}
>
<Trans i18nKey={link.label} defaults={link.label} />
</Link>
</DropdownMenuItem>
);
});
},
[links],
);
const currentPathName = useMemo(() => {
return Object.values(links).find((link) => link.path === path)?.label;
}, [links, path]);
return (
<DropdownMenu>
<DropdownMenuTrigger className={'w-full'}>
<div
className={
'Button dark:ring-dark-700 w-full justify-start ring-2 ring-gray-100'
}
>
<span
className={
'ButtonNormal flex w-full items-center justify-between space-x-2'
}
>
<span>
<Trans i18nKey={currentPathName} defaults={currentPathName} />
</span>
<ChevronDown className={'h-5'} />
</span>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent>{items}</DropdownMenuContent>
</DropdownMenu>
);
}
export default MobileNavigationDropdown;

106
packages/ui/src/makerkit/mode-toggle.tsx
View File

@@ -7,9 +7,17 @@ import { useTheme } from 'next-themes';
import { cn } from '../lib/utils';
import { Button } from '../shadcn/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '../shadcn/card';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSub,
@@ -36,13 +44,13 @@ export function ModeToggle(props: { className?: string }) {
key={mode}
onClick={() => {
setTheme(mode);
setCookieTheme(mode);
setCookeTheme(mode);
}}
>
<Icon theme={mode} />
<span>
<Trans i18nKey={`common:${mode}Theme`} />
<Trans i18nKey={`common.${mode}Theme`} />
</span>
</DropdownMenuItem>
);
@@ -51,12 +59,14 @@ export function ModeToggle(props: { className?: string }) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className={props.className}>
<Sun className="h-[0.9rem] w-[0.9rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
<Moon className="absolute h-[0.9rem] w-[0.9rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
<span className="sr-only">Toggle theme</span>
</Button>
<DropdownMenuTrigger
render={
<Button variant="ghost" size="icon" className={props.className} />
}
>
<Sun className="h-[0.9rem] w-[0.9rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
<Moon className="absolute h-[0.9rem] w-[0.9rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
<span className="sr-only">Toggle theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">{Items}</DropdownMenuContent>
@@ -74,20 +84,18 @@ export function SubMenuModeToggle() {
return (
<DropdownMenuItem
className={cn('flex cursor-pointer items-center space-x-2', {
className={cn('flex cursor-pointer items-center gap-x-2', {
'bg-muted': isSelected,
})}
key={mode}
onClick={() => {
setTheme(mode);
setCookieTheme(mode);
setCookeTheme(mode);
}}
>
<Icon theme={mode} />
<span>
<Trans i18nKey={`common:${mode}Theme`} />
</span>
<Trans i18nKey={`common.${mode}Theme`} />
</DropdownMenuItem>
);
}),
@@ -95,20 +103,16 @@ export function SubMenuModeToggle() {
);
return (
<>
<DropdownMenuGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger
className={
'hidden w-full items-center justify-between gap-x-3 lg:flex'
'hidden w-full items-center justify-between gap-x-2 lg:flex'
}
>
<span className={'flex space-x-2'}>
<Icon theme={resolvedTheme} />
<Icon theme={resolvedTheme} />
<span>
<Trans i18nKey={'common:theme'} />
</span>
</span>
<Trans i18nKey={'common.theme'} />
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>{MenuItems}</DropdownMenuSubContent>
@@ -116,19 +120,17 @@ export function SubMenuModeToggle() {
<div className={'lg:hidden'}>
<DropdownMenuLabel>
<Trans i18nKey={'common:theme'} />
<Trans i18nKey={'common.theme'} />
</DropdownMenuLabel>
{MenuItems}
</div>
</>
</DropdownMenuGroup>
);
}
function setCookieTheme(theme: string) {
const secure =
typeof window !== 'undefined' && window.location.protocol === 'https:';
document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure ? '; Secure' : ''}`;
function setCookeTheme(theme: string) {
document.cookie = `theme=${theme}; path=/; max-age=31536000`;
}
function Icon({ theme }: { theme: string | undefined }) {
@@ -141,3 +143,53 @@ function Icon({ theme }: { theme: string | undefined }) {
return <Computer className="h-4" />;
}
}
export function ThemePreferenceCard({
currentTheme,
}: {
currentTheme: string;
}) {
const { setTheme, theme = currentTheme } = useTheme();
return (
<Card>
<CardHeader>
<CardTitle>
<Trans i18nKey="common.theme" />
</CardTitle>
<CardDescription>
<Trans i18nKey="common.themeDescription" />
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-3">
{MODES.map((mode) => {
const isSelected = theme === mode;
return (
<Button
key={mode}
variant={isSelected ? 'default' : 'outline'}
className={'flex items-center justify-center gap-2'}
onClick={() => {
setTheme(mode);
setCookeTheme(mode);
}}
>
{mode === 'light' && <Sun className="size-4" />}
{mode === 'dark' && <Moon className="size-4" />}
{mode === 'system' && <Computer className="size-4" />}
<span className="text-sm">
<Trans i18nKey={`common.${mode}Theme`} />
</span>
</Button>
);
})}
</div>
</CardContent>
</Card>
);
}

436
packages/ui/src/makerkit/multi-step-form.tsx
View File

@@ -1,436 +0,0 @@
'use client';
import React, {
HTMLProps,
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useMutation } from '@tanstack/react-query';
import { Slot } from 'radix-ui';
import { Path, UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import { cn } from '../lib/utils';
interface MultiStepFormProps<T extends z.ZodType> {
schema: T;
form: UseFormReturn<z.infer<T>>;
onSubmit: (data: z.infer<T>) => void;
useStepTransition?: boolean;
className?: string;
}
type StepProps = React.PropsWithChildren<
{
name: string;
asChild?: boolean;
} & React.HTMLProps<HTMLDivElement>
>;
const MultiStepFormContext = createContext<ReturnType<
typeof useMultiStepForm
> | null>(null);
/**
* @name MultiStepForm
* @description Multi-step form component for React
* @param schema
* @param form
* @param onSubmit
* @param children
* @param className
* @constructor
*/
export function MultiStepForm<T extends z.ZodType>({
schema,
form,
onSubmit,
children,
className,
}: React.PropsWithChildren<MultiStepFormProps<T>>) {
const steps = useMemo(
() =>
React.Children.toArray(children).filter(
(child): child is React.ReactElement<StepProps> =>
React.isValidElement(child) && child.type === MultiStepFormStep,
),
[children],
);
const header = useMemo(() => {
return React.Children.toArray(children).find(
(child) =>
React.isValidElement(child) && child.type === MultiStepFormHeader,
);
}, [children]);
const footer = useMemo(() => {
return React.Children.toArray(children).find(
(child) =>
React.isValidElement(child) && child.type === MultiStepFormFooter,
);
}, [children]);
const stepNames = steps.map((step) => step.props.name);
const multiStepForm = useMultiStepForm(schema, form, stepNames, onSubmit);
return (
<MultiStepFormContext.Provider value={multiStepForm}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className={cn(className, 'flex size-full flex-col overflow-hidden')}
>
{header}
<div className="relative transition-transform duration-500">
{steps.map((step, index) => {
const isActive = index === multiStepForm.currentStepIndex;
return (
<AnimatedStep
key={step.props.name}
direction={multiStepForm.direction}
isActive={isActive}
index={index}
currentIndex={multiStepForm.currentStepIndex}
>
{step}
</AnimatedStep>
);
})}
</div>
{footer}
</form>
</MultiStepFormContext.Provider>
);
}
export function MultiStepFormContextProvider(props: {
children: (context: ReturnType<typeof useMultiStepForm>) => React.ReactNode;
}) {
const ctx = useMultiStepFormContext();
if (Array.isArray(props.children)) {
const [child] = props.children;
return (
child as (context: ReturnType<typeof useMultiStepForm>) => React.ReactNode
)(ctx);
}
return props.children(ctx);
}
export const MultiStepFormStep: React.FC<
React.PropsWithChildren<
{
asChild?: boolean;
ref?: React.Ref<HTMLDivElement>;
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormStep({ children, asChild, ...props }) {
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};
export function useMultiStepFormContext<Schema extends z.ZodType>() {
const context = useContext(MultiStepFormContext) as ReturnType<
typeof useMultiStepForm<Schema>
>;
if (!context) {
throw new Error(
'useMultiStepFormContext must be used within a MultiStepForm',
);
}
return context;
}
/**
* @name useMultiStepForm
* @description Hook for multi-step forms
* @param schema
* @param form
* @param stepNames
* @param onSubmit
*/
export function useMultiStepForm<Schema extends z.ZodType>(
schema: Schema,
form: UseFormReturn<z.infer<Schema>>,
stepNames: string[],
onSubmit: (data: z.infer<Schema>) => void,
) {
const [state, setState] = useState({
currentStepIndex: 0,
direction: undefined as 'forward' | 'backward' | undefined,
});
const isStepValid = useCallback(() => {
const currentStepName = stepNames[state.currentStepIndex] as Path<
z.TypeOf<Schema>
>;
if (schema instanceof z.ZodObject) {
const currentStepSchema = schema.shape[currentStepName] as z.ZodType;
// the user may not want to validate the current step
// or the step doesn't contain any form field
if (!currentStepSchema) {
return true;
}
const currentStepData = form.getValues(currentStepName) ?? {};
const result = currentStepSchema.safeParse(currentStepData);
return result.success;
}
throw new Error(`Unsupported schema type: ${schema.constructor.name}`);
}, [schema, form, stepNames, state.currentStepIndex]);
const nextStep = useCallback(
<Ev extends React.SyntheticEvent>(e: Ev) => {
// prevent form submission when the user presses Enter
// or if the user forgets [type="button"] on the button
e.preventDefault();
const isValid = isStepValid();
if (!isValid) {
const currentStepName = stepNames[state.currentStepIndex] as Path<
z.TypeOf<Schema>
>;
if (schema instanceof z.ZodObject) {
const currentStepSchema = schema.shape[currentStepName] as z.ZodType;
if (currentStepSchema) {
const fields = Object.keys(
(currentStepSchema as z.ZodObject<never>).shape,
);
const keys = fields.map((field) => `${currentStepName}.${field}`);
// trigger validation for all fields in the current step
for (const key of keys) {
void form.trigger(key as Path<z.TypeOf<Schema>>);
}
return;
}
}
}
if (isValid && state.currentStepIndex < stepNames.length - 1) {
setState((prevState) => {
return {
...prevState,
direction: 'forward',
currentStepIndex: prevState.currentStepIndex + 1,
};
});
}
},
[isStepValid, state.currentStepIndex, stepNames, schema, form],
);
const prevStep = useCallback(
<Ev extends React.SyntheticEvent>(e: Ev) => {
// prevent form submission when the user presses Enter
// or if the user forgets [type="button"] on the button
e.preventDefault();
if (state.currentStepIndex > 0) {
setState((prevState) => {
return {
...prevState,
direction: 'backward',
currentStepIndex: prevState.currentStepIndex - 1,
};
});
}
},
[state.currentStepIndex],
);
const goToStep = useCallback(
(index: number) => {
if (index >= 0 && index < stepNames.length && isStepValid()) {
setState((prevState) => {
return {
...prevState,
direction:
index > prevState.currentStepIndex ? 'forward' : 'backward',
currentStepIndex: index,
};
});
}
},
[isStepValid, stepNames.length],
);
const isValid = form.formState.isValid;
const errors = form.formState.errors;
const mutation = useMutation({
mutationFn: () => {
return form.handleSubmit(onSubmit)();
},
});
return useMemo(
() => ({
form,
currentStep: stepNames[state.currentStepIndex] as string,
currentStepIndex: state.currentStepIndex,
totalSteps: stepNames.length,
isFirstStep: state.currentStepIndex === 0,
isLastStep: state.currentStepIndex === stepNames.length - 1,
nextStep,
prevStep,
goToStep,
direction: state.direction,
isStepValid,
isValid,
errors,
mutation,
}),
[
form,
mutation,
stepNames,
state.currentStepIndex,
state.direction,
nextStep,
prevStep,
goToStep,
isStepValid,
isValid,
errors,
],
);
}
export const MultiStepFormHeader: React.FC<
React.PropsWithChildren<
{
asChild?: boolean;
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormHeader({ children, asChild, ...props }) {
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};
export const MultiStepFormFooter: React.FC<
React.PropsWithChildren<
{
asChild?: boolean;
} & HTMLProps<HTMLDivElement>
>
> = function MultiStepFormFooter({ children, asChild, ...props }) {
const Cmp = asChild ? Slot.Root : 'div';
return (
<Cmp {...props}>
<Slot.Slottable>{children}</Slot.Slottable>
</Cmp>
);
};
/**
* @name createStepSchema
* @description Create a schema for a multi-step form
* @param steps
*/
export function createStepSchema<T extends Record<string, z.ZodType>>(
steps: T,
) {
return z.object(steps);
}
interface AnimatedStepProps {
direction: 'forward' | 'backward' | undefined;
isActive: boolean;
index: number;
currentIndex: number;
}
function AnimatedStep({
isActive,
direction,
children,
index,
currentIndex,
}: React.PropsWithChildren<AnimatedStepProps>) {
const [shouldRender, setShouldRender] = useState(isActive);
const stepRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (isActive) {
// eslint-disable-next-line react-hooks/set-state-in-effect
setShouldRender(true);
} else {
const timer = setTimeout(() => setShouldRender(false), 300);
return () => clearTimeout(timer);
}
}, [isActive]);
useEffect(() => {
if (isActive && stepRef.current) {
const focusableElement = stepRef.current.querySelector(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
);
if (focusableElement) {
(focusableElement as HTMLElement).focus();
}
}
}, [isActive]);
if (!shouldRender) {
return null;
}
const baseClasses =
' top-0 left-0 w-full h-full transition-all duration-300 ease-in-out animate-in fade-in zoom-in-95';
const visibilityClasses = isActive ? 'opacity-100' : 'opacity-0 absolute';
const transformClasses = cn(
'translate-x-0',
isActive
? {}
: {
'-translate-x-full': direction === 'forward' || index < currentIndex,
'translate-x-full': direction === 'backward' || index > currentIndex,
},
);
const className = cn(baseClasses, visibilityClasses, transformClasses);
return (
<div ref={stepRef} className={className} aria-hidden={!isActive}>
{children}
</div>
);
}

27
packages/ui/src/makerkit/navigation-config.schema.ts
View File

@@ -1,9 +1,10 @@
import { z } from 'zod';
import * as z from 'zod';
const RouteMatchingEnd = z
.union([z.boolean(), z.function().args(z.string()).returns(z.boolean())])
.default(false)
.optional();
const RouteContextSchema = z
.enum(['personal', 'organization', 'all'])
.default('all');
export type RouteContext = z.output<typeof RouteContextSchema>;
const Divider = z.object({
divider: z.literal(true),
@@ -13,19 +14,21 @@ const RouteSubChild = z.object({
label: z.string(),
path: z.string(),
Icon: z.custom<React.ReactNode>().optional(),
end: RouteMatchingEnd,
highlightMatch: z.string().optional(),
renderAction: z.custom<React.ReactNode>().optional(),
context: RouteContextSchema.optional(),
});
const RouteChild = z.object({
label: z.string(),
path: z.string(),
Icon: z.custom<React.ReactNode>().optional(),
end: RouteMatchingEnd,
highlightMatch: z.string().optional(),
children: z.array(RouteSubChild).default([]).optional(),
collapsible: z.boolean().default(false).optional(),
collapsed: z.boolean().default(false).optional(),
renderAction: z.custom<React.ReactNode>().optional(),
context: RouteContextSchema.optional(),
});
const RouteGroup = z.object({
@@ -37,12 +40,8 @@ const RouteGroup = z.object({
});
export const NavigationConfigSchema = z.object({
style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
sidebarCollapsed: z
.enum(['false', 'true'])
.default('true')
.optional()
.transform((value) => value === `true`),
sidebarCollapsedStyle: z.enum(['offcanvas', 'icon', 'none']).default('icon'),
sidebarCollapsed: z.stringbool().optional().default(false),
sidebarCollapsedStyle: z.enum(['icon', 'offcanvas', 'none']).default('icon'),
routes: z.array(z.union([RouteGroup, Divider])),
style: z.enum(['sidebar', 'header', 'custom']).default('sidebar'),
});

104
packages/ui/src/makerkit/navigation-utils.ts Normal file
View File

@@ -0,0 +1,104 @@
import * as z from 'zod';
import {
NavigationConfigSchema,
type RouteContext,
} from './navigation-config.schema';
type AccountMode = 'personal-only' | 'organizations-only' | 'hybrid';
/**
* Determines if a navigation item should be visible based on context and mode
*/
function shouldShowNavItem(
itemContext: RouteContext,
currentContext: 'personal' | 'organization',
mode: AccountMode,
): boolean {
// In organizations-only mode, skip personal-only items
if (mode === 'organizations-only' && itemContext === 'personal') {
return false;
}
// In personal-only mode, skip organization-only items
if (mode === 'personal-only' && itemContext === 'organization') {
return false;
}
// Items for 'all' contexts are always visible
if (itemContext === 'all') {
return true;
}
// Filter by current context
return itemContext === currentContext;
}
/**
* Filter navigation routes based on account context and mode
* Adapts navigation based on:
* 1. Current context (personal vs organization)
* 2. Account mode configuration (personal-only, organizations-only, hybrid)
*/
export function getContextAwareNavigation(
routes: z.output<typeof NavigationConfigSchema>['routes'],
params: {
isOrganization: boolean;
mode: AccountMode;
sidebarCollapsed?: boolean;
},
) {
const currentContext = params.isOrganization ? 'organization' : 'personal';
const filteredRoutes = routes
.map((section) => {
// Pass through dividers unchanged
if ('divider' in section) {
return section;
}
const filteredChildren = section.children
.filter((child) =>
shouldShowNavItem(
child.context ?? 'all',
currentContext,
params.mode,
),
)
.map((child) => {
// Filter nested children if present
if (child.children && child.children.length > 0) {
const filteredNestedChildren = child.children.filter((subChild) =>
shouldShowNavItem(
subChild.context ?? 'all',
currentContext,
params.mode,
),
);
return {
...child,
children: filteredNestedChildren,
};
}
return child;
});
// Skip empty sections
if (filteredChildren.length === 0) {
return null;
}
return {
...section,
children: filteredChildren,
};
})
.filter((section) => section !== null);
return NavigationConfigSchema.parse({
routes: filteredRoutes,
sidebarCollapsed: params.sidebarCollapsed ?? false,
});
}

31
packages/ui/src/makerkit/page.tsx
View File

@@ -14,10 +14,6 @@ type PageProps = React.PropsWithChildren<{
sticky?: boolean;
}>;
const ENABLE_SIDEBAR_TRIGGER = process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER
? process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER === 'true'
: true;
export function Page(props: PageProps) {
switch (props.style) {
case 'header':
@@ -32,7 +28,7 @@ export function Page(props: PageProps) {
}
function PageWithSidebar(props: PageProps) {
const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
const { Navigation, Children } = getSlotsFromPage(props);
return (
<div
@@ -46,8 +42,6 @@ function PageWithSidebar(props: PageProps) {
'mx-auto flex h-screen w-full min-w-0 flex-1 flex-col bg-inherit'
}
>
{MobileNavigation}
<div
className={'bg-background flex min-w-0 flex-1 flex-col px-4 lg:px-0'}
>
@@ -153,33 +147,22 @@ export function PageHeader({
title,
description,
className,
displaySidebarTrigger = ENABLE_SIDEBAR_TRIGGER,
}: React.PropsWithChildren<{
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
displaySidebarTrigger?: boolean;
}>) {
return (
<div
className={cn(
'flex items-center justify-between py-5 lg:px-4',
className,
)}
>
<div className={cn('flex items-center justify-between py-4', className)}>
<div className={'flex flex-col gap-y-2'}>
<div className="flex items-center gap-x-2.5">
{displaySidebarTrigger ? (
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground hidden h-4.5 w-4.5 cursor-pointer lg:inline-flex" />
) : null}
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
<If condition={description}>
<If condition={displaySidebarTrigger}>
<Separator
orientation="vertical"
className="hidden h-4 w-px lg:group-data-[minimized]:block"
/>
</If>
<Separator
orientation="vertical"
className="hidden h-4 w-px lg:group-data-[collapsible=icon]:block"
/>
<PageDescription>{description}</PageDescription>
</If>

14
packages/ui/src/makerkit/profile-avatar.tsx
View File

@@ -18,17 +18,14 @@ type ProfileAvatarProps = (SessionProps | TextProps) & {
export function ProfileAvatar(props: ProfileAvatarProps) {
const avatarClassName = cn(
props.className,
'mx-auto h-9 w-9 group-focus:ring-2',
'mx-auto size-8 group-focus:ring-2',
);
if ('text' in props) {
return (
<Avatar className={avatarClassName}>
<AvatarFallback
className={cn(
props.fallbackClassName,
'animate-in fade-in uppercase',
)}
className={cn(props.fallbackClassName, 'rounded-md! uppercase')}
>
{props.text.slice(0, 1)}
</AvatarFallback>
@@ -40,10 +37,13 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
return (
<Avatar className={avatarClassName}>
<AvatarImage src={props.pictureUrl ?? undefined} />
<AvatarImage
className={'rounded-md!'}
src={props.pictureUrl || undefined}
/>
<AvatarFallback
className={cn(props.fallbackClassName, 'animate-in fade-in')}
className={cn(props.fallbackClassName, 'rounded-md! uppercase')}
>
<span suppressHydrationWarning className={'uppercase'}>
{initials}

405
packages/ui/src/makerkit/sidebar-navigation.tsx Normal file
View File

@@ -0,0 +1,405 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronDown } from 'lucide-react';
import { useLocale, useTranslations } from 'next-intl';
import * as z from 'zod';
import { cn, isRouteActive } from '../lib/utils';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '../shadcn/collapsible';
import {
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarSeparator,
useSidebar,
} from '../shadcn/sidebar';
import { If } from './if';
import { NavigationConfigSchema } from './navigation-config.schema';
import { Trans } from './trans';
type SidebarNavigationConfig = z.output<typeof NavigationConfigSchema>;
type SidebarNavigationRoute = SidebarNavigationConfig['routes'][number];
type SidebarNavigationRouteGroup = Extract<
SidebarNavigationRoute,
{ children: unknown }
>;
type SidebarNavigationRouteChild =
SidebarNavigationRouteGroup['children'][number];
function getSidebarNavigationTooltip(
open: boolean,
t: ReturnType<typeof useTranslations>,
label: string,
) {
if (open) {
return undefined;
}
return t.has(label) ? t(label) : label;
}
function MaybeCollapsible({
enabled,
defaultOpen,
children,
}: React.PropsWithChildren<{
enabled: boolean;
defaultOpen: boolean;
}>) {
if (!enabled) {
return <>{children}</>;
}
return (
<Collapsible defaultOpen={defaultOpen} className={'group/collapsible'}>
{children}
</Collapsible>
);
}
function MaybeCollapsibleContent({
enabled,
children,
}: React.PropsWithChildren<{
enabled: boolean;
}>) {
if (!enabled) {
return <>{children}</>;
}
return <CollapsibleContent>{children}</CollapsibleContent>;
}
function SidebarNavigationRouteItem({
item,
index,
open,
currentLocale,
currentPath,
t,
}: {
item: SidebarNavigationRoute;
index: number;
open: boolean;
currentLocale: ReturnType<typeof useLocale>;
currentPath: string;
t: ReturnType<typeof useTranslations>;
}) {
if ('divider' in item) {
return <SidebarSeparator />;
}
return (
<SidebarNavigationRouteGroupItem
item={item}
index={index}
open={open}
currentLocale={currentLocale}
currentPath={currentPath}
t={t}
/>
);
}
function SidebarNavigationRouteGroupLabel({
label,
collapsible,
open,
}: {
label: string;
collapsible: boolean;
open: boolean;
}) {
const className = cn({ hidden: !open });
return (
<If
condition={collapsible}
fallback={
<SidebarGroupLabel className={className}>
<Trans i18nKey={label} defaults={label} />
</SidebarGroupLabel>
}
>
<SidebarGroupLabel className={className}>
<CollapsibleTrigger>
<Trans i18nKey={label} defaults={label} />
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
</CollapsibleTrigger>
</SidebarGroupLabel>
</If>
);
}
function SidebarNavigationSubItems({
items,
open,
currentLocale,
currentPath,
}: {
items: SidebarNavigationRouteChild['children'];
open: boolean;
currentLocale: ReturnType<typeof useLocale>;
currentPath: string;
}) {
return (
<If condition={items}>
{(items) =>
items.length > 0 && (
<SidebarMenuSub
className={cn({
'mx-0 px-1.5': !open,
})}
>
{items.map((child) => {
const isActive = isRouteActive(
child.path,
currentPath,
child.highlightMatch,
{ locale: currentLocale },
);
const linkClassName = cn('flex items-center', {
'mx-auto w-full gap-0! [&>svg]:flex-1': !open,
});
const spanClassName = cn(
'w-auto transition-opacity duration-300',
{
'w-0 opacity-0': !open,
},
);
return (
<SidebarMenuSubItem key={child.path}>
<SidebarMenuSubButton
isActive={isActive}
render={
<Link className={linkClassName} href={child.path}>
{child.Icon}
<span className={spanClassName}>
<Trans i18nKey={child.label} defaults={child.label} />
</span>
</Link>
}
/>
</SidebarMenuSubItem>
);
})}
</SidebarMenuSub>
)
}
</If>
);
}
function SidebarNavigationRouteChildItem({
child,
open,
currentLocale,
currentPath,
t,
}: {
child: SidebarNavigationRouteChild;
open: boolean;
currentLocale: ReturnType<typeof useLocale>;
currentPath: string;
t: ReturnType<typeof useTranslations>;
}) {
const collapsible = Boolean('collapsible' in child && child.collapsible);
const tooltip = getSidebarNavigationTooltip(open, t, child.label);
const triggerItem = collapsible ? (
<CollapsibleTrigger
render={
<SidebarMenuButton tooltip={tooltip}>
<span
className={cn('flex items-center gap-2', {
'mx-auto w-full gap-0 [&>svg]:flex-1 [&>svg]:shrink-0': !open,
})}
>
{child.Icon}
<span
className={cn(
'transition-width w-auto transition-opacity duration-500',
{
'w-0 opacity-0': !open,
},
)}
>
<Trans i18nKey={child.label} defaults={child.label} />
</span>
<ChevronDown
className={cn(
'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
{
'hidden size-0': !open,
},
)}
/>
</span>
</SidebarMenuButton>
}
/>
) : (
(() => {
const path = 'path' in child ? child.path : '';
const isActive = isRouteActive(path, currentPath, child.highlightMatch, {
locale: currentLocale,
});
return (
<SidebarMenuButton
isActive={isActive}
tooltip={tooltip}
render={
<Link
className={cn('flex items-center gap-x-2', {
'mx-auto gap-0! [&>svg]:flex-1': !open,
})}
href={path}
>
{child.Icon}
<span
className={cn('w-auto transition-opacity duration-300', {
'w-0 opacity-0': !open,
})}
>
<Trans i18nKey={child.label} defaults={child.label} />
</span>
</Link>
}
/>
);
})()
);
return (
<MaybeCollapsible enabled={collapsible} defaultOpen={!child.collapsed}>
<SidebarMenuItem>
{triggerItem}
<MaybeCollapsibleContent enabled={collapsible}>
<SidebarNavigationSubItems
items={child.children}
open={open}
currentLocale={currentLocale}
currentPath={currentPath}
/>
</MaybeCollapsibleContent>
<If condition={child.renderAction}>
<SidebarMenuAction>{child.renderAction}</SidebarMenuAction>
</If>
</SidebarMenuItem>
</MaybeCollapsible>
);
}
function SidebarNavigationRouteGroupItem({
item,
index,
open,
currentLocale,
currentPath,
t,
}: {
item: SidebarNavigationRouteGroup;
index: number;
open: boolean;
currentLocale: ReturnType<typeof useLocale>;
currentPath: string;
t: ReturnType<typeof useTranslations>;
}) {
const collapsible = Boolean(item.collapsible);
return (
<MaybeCollapsible enabled={collapsible} defaultOpen={!item.collapsed}>
<SidebarGroup key={item.label} className={cn({ 'p-0!': !open })}>
<SidebarNavigationRouteGroupLabel
label={item.label}
collapsible={collapsible}
open={open}
/>
<If condition={item.renderAction}>
<SidebarGroupAction title={item.label}>
{item.renderAction}
</SidebarGroupAction>
</If>
<SidebarGroupContent>
<SidebarMenu
className={cn({
'gap-y-0.5!': open,
'items-center': !open,
})}
>
<MaybeCollapsibleContent enabled={collapsible}>
{item.children.map((child, childIndex) => (
<SidebarNavigationRouteChildItem
key={`group-${index}-${childIndex}`}
child={child}
open={open}
currentLocale={currentLocale}
currentPath={currentPath}
t={t}
/>
))}
</MaybeCollapsibleContent>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</MaybeCollapsible>
);
}
export function SidebarNavigation({
config,
}: React.PropsWithChildren<{
config: z.output<typeof NavigationConfigSchema>;
}>) {
const currentLocale = useLocale();
const currentPath = usePathname() ?? '';
const { open } = useSidebar();
const t = useTranslations();
return (
<div className={cn('flex flex-col', { 'gap-y-0': open, 'gap-y-1': !open })}>
{config.routes.map((item, index) => (
<SidebarNavigationRouteItem
key={'divider' in item ? `divider-${index}` : `collapsible-${index}`}
item={item}
index={index}
open={open}
currentLocale={currentLocale}
currentPath={currentPath}
t={t}
/>
))}
</div>
);
}

373
packages/ui/src/makerkit/sidebar.tsx
View File

@@ -1,373 +0,0 @@
'use client';
import { useContext, useId, useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cva } from 'class-variance-authority';
import { ChevronDown } from 'lucide-react';
import { z } from 'zod';
import { cn, isRouteActive } from '../lib/utils';
import { Button } from '../shadcn/button';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '../shadcn/tooltip';
import { SidebarContext } from './context/sidebar.context';
import { If } from './if';
import type { NavigationConfigSchema } from './navigation-config.schema';
import { Trans } from './trans';
export type SidebarConfig = z.infer<typeof NavigationConfigSchema>;
export { SidebarContext };
/**
* @deprecated
* This component is deprecated and will be removed in a future version.
* Please use the Shadcn Sidebar component instead.
*/
export function Sidebar(props: {
collapsed?: boolean;
expandOnHover?: boolean;
className?: string;
children:
| React.ReactNode
| ((props: {
collapsed: boolean;
setCollapsed: (collapsed: boolean) => void;
}) => React.ReactNode);
}) {
const [collapsed, setCollapsed] = useState(props.collapsed ?? false);
const [isExpanded, setIsExpanded] = useState(false);
const expandOnHover =
props.expandOnHover ??
process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';
const sidebarSizeClassName = getSidebarSizeClassName(collapsed, isExpanded);
const className = getClassNameBuilder(
cn(props.className ?? '', sidebarSizeClassName, {}),
)();
const containerClassName = cn(sidebarSizeClassName, 'bg-inherit', {
'max-w-[4rem]': expandOnHover && isExpanded,
});
const ctx = { collapsed, setCollapsed };
const onMouseEnter =
props.collapsed && expandOnHover
? () => {
setCollapsed(false);
setIsExpanded(true);
}
: undefined;
const onMouseLeave =
props.collapsed && expandOnHover
? () => {
if (!isRadixPopupOpen()) {
setCollapsed(true);
setIsExpanded(false);
} else {
onRadixPopupClose(() => {
setCollapsed(true);
setIsExpanded(false);
});
}
}
: undefined;
return (
<SidebarContext.Provider value={ctx}>
<div
className={containerClassName}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div aria-expanded={!collapsed} className={className}>
{typeof props.children === 'function'
? props.children(ctx)
: props.children}
</div>
</div>
</SidebarContext.Provider>
);
}
export function SidebarContent({
children,
className: customClassName,
}: React.PropsWithChildren<{
className?: string;
}>) {
const { collapsed } = useContext(SidebarContext);
const className = cn(
'flex w-full flex-col space-y-1.5 py-1',
customClassName,
{
'px-4': !collapsed,
'px-2': collapsed,
},
);
return <div className={className}>{children}</div>;
}
function SidebarGroupWrapper({
id,
sidebarCollapsed,
collapsible,
isGroupCollapsed,
setIsGroupCollapsed,
label,
}: {
id: string;
sidebarCollapsed: boolean;
collapsible: boolean;
isGroupCollapsed: boolean;
setIsGroupCollapsed: (isGroupCollapsed: boolean) => void;
label: React.ReactNode;
}) {
const className = cn(
'px-container group flex items-center justify-between space-x-2.5',
{
'py-2.5': !sidebarCollapsed,
},
);
if (collapsible) {
return (
<button
aria-expanded={!isGroupCollapsed}
aria-controls={id}
onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
className={className}
>
<span
className={'text-muted-foreground text-xs font-semibold uppercase'}
>
{label}
</span>
<If condition={collapsible}>
<ChevronDown
className={cn(`h-3 transition duration-300`, {
'rotate-180': !isGroupCollapsed,
})}
/>
</If>
</button>
);
}
if (sidebarCollapsed) {
return null;
}
return (
<div className={className}>
<span className={'text-muted-foreground text-xs font-semibold uppercase'}>
{label}
</span>
</div>
);
}
export function SidebarGroup({
label,
collapsed = false,
collapsible = true,
children,
}: React.PropsWithChildren<{
label: string | React.ReactNode;
collapsible?: boolean;
collapsed?: boolean;
}>) {
const { collapsed: sidebarCollapsed } = useContext(SidebarContext);
const [isGroupCollapsed, setIsGroupCollapsed] = useState(collapsed);
const id = useId();
return (
<div
className={cn('flex flex-col', {
'gap-y-2 py-1': !collapsed,
})}
>
<SidebarGroupWrapper
id={id}
sidebarCollapsed={sidebarCollapsed}
collapsible={collapsible}
isGroupCollapsed={isGroupCollapsed}
setIsGroupCollapsed={setIsGroupCollapsed}
label={label}
/>
<If condition={collapsible ? !isGroupCollapsed : true}>
<div id={id} className={'flex flex-col space-y-1.5'}>
{children}
</div>
</If>
</div>
);
}
export function SidebarDivider() {
return (
<div className={'dark:border-dark-800 my-2 border-t border-gray-100'} />
);
}
export function SidebarItem({
end,
path,
children,
Icon,
}: React.PropsWithChildren<{
path: string;
Icon: React.ReactNode;
end?: boolean | ((path: string) => boolean);
}>) {
const { collapsed } = useContext(SidebarContext);
const currentPath = usePathname() ?? '';
const active = isRouteActive(path, currentPath, end ?? false);
const variant = active ? 'secondary' : 'ghost';
return (
<TooltipProvider delayDuration={0}>
<Tooltip disableHoverableContent>
<TooltipTrigger asChild>
<Button
asChild
className={cn(
'active:bg-secondary/60 flex w-full text-sm shadow-none',
{
'justify-start space-x-2.5': !collapsed,
'hover:bg-initial': active,
},
)}
size={'sm'}
variant={variant}
>
<Link href={path}>
{Icon}
<span
className={cn('w-auto transition-opacity duration-300', {
'w-0 opacity-0': collapsed,
})}
>
{children}
</span>
</Link>
</Button>
</TooltipTrigger>
<If condition={collapsed}>
<TooltipContent side={'right'} sideOffset={10}>
{children}
</TooltipContent>
</If>
</Tooltip>
</TooltipProvider>
);
}
function getClassNameBuilder(className: string) {
return cva([
cn(
'group/sidebar transition-width fixed box-content flex h-screen w-2/12 flex-col bg-inherit backdrop-blur-xs duration-200',
className,
),
]);
}
function getSidebarSizeClassName(collapsed: boolean, isExpanded: boolean) {
return cn(['z-50 flex w-full flex-col'], {
'dark:shadow-primary/20 lg:w-[17rem]': !collapsed,
'lg:w-[4rem]': collapsed,
shadow: isExpanded,
});
}
function getRadixPopup() {
return document.querySelector('[data-radix-popper-content-wrapper]');
}
function isRadixPopupOpen() {
return getRadixPopup() !== null;
}
function onRadixPopupClose(callback: () => void) {
const element = getRadixPopup();
if (element) {
const observer = new MutationObserver(() => {
if (!getRadixPopup()) {
callback();
observer.disconnect();
}
});
observer.observe(element.parentElement!, {
childList: true,
subtree: true,
});
}
}
export function SidebarNavigation({
config,
}: React.PropsWithChildren<{
config: SidebarConfig;
}>) {
return (
<>
{config.routes.map((item, index) => {
if ('divider' in item) {
return <SidebarDivider key={index} />;
}
if ('children' in item) {
return (
<SidebarGroup
key={item.label}
label={<Trans i18nKey={item.label} defaults={item.label} />}
collapsible={item.collapsible}
collapsed={item.collapsed}
>
{item.children.map((child) => {
if ('collapsible' in child && child.collapsible) {
throw new Error(
'Collapsible groups are not supported in the old Sidebar. Please migrate to the new Sidebar.',
);
}
if ('path' in child) {
return (
<SidebarItem
key={child.path}
end={child.end}
path={child.path}
Icon={child.Icon}
>
<Trans i18nKey={child.label} defaults={child.label} />
</SidebarItem>
);
}
})}
</SidebarGroup>
);
}
})}
</>
);
}

172
packages/ui/src/makerkit/trans.tsx
View File

@@ -1,5 +1,171 @@
import { Trans as TransComponent } from 'react-i18next/TransWithoutContext';
import React from 'react';
export function Trans(props: React.ComponentProps<typeof TransComponent>) {
return <TransComponent {...props} />;
import { useTranslations } from 'next-intl';
import { ErrorBoundary } from './error-boundary';
interface TransProps {
/**
* The i18n key to translate. Supports dot notation for nested keys.
* Example: 'auth.login.title' or 'common.buttons.submit'
*/
i18nKey: string | undefined;
/**
* Default text to use if the translation key is not found.
*/
defaults?: React.ReactNode;
/**
* Values to interpolate into the translation.
* Example: { name: 'John' } for a translation like "Hello {name}"
*/
values?: Record<string, unknown>;
/**
* The translation namespace (optional, will be extracted from i18nKey if not provided).
*/
ns?: string;
/**
* Components to use for rich text interpolation.
* Can be either:
* - A function: (chunks) => <strong>{chunks}</strong>
* - A React element: <strong /> (for backward compatibility)
*/
components?: Record<
string,
| ((chunks: React.ReactNode) => React.ReactNode)
| React.ReactElement
| React.ComponentType
>;
}
/**
* Trans component for displaying translated text using next-intl.
* Provides backward compatibility with i18next Trans component API.
*/
export function Trans({
i18nKey,
defaults,
values,
ns,
components,
}: TransProps) {
return (
<ErrorBoundary fallback={<>{defaults ?? i18nKey}</>}>
<Translate
i18nKey={i18nKey!}
defaults={defaults}
values={values}
ns={ns}
components={components}
/>
</ErrorBoundary>
);
}
function normalizeI18nKey(key: string | undefined): string {
if (!key) return '';
// Intercept i18next-style "namespace:key" format and convert to "namespace.key"
if (key.includes(':')) {
const normalized = key.replace(':', '.');
console.warn(
`[Trans] Detected i18next-style key "${key}". next-intl only supports dot notation (e.g. "${normalized}"). Please update to the new format.`,
);
return normalized;
}
return key;
}
function Translate({ i18nKey, defaults, values, ns, components }: TransProps) {
const normalizedKey = normalizeI18nKey(i18nKey);
// Extract namespace and key from i18nKey if it contains a dot
const [namespace, ...keyParts] = normalizedKey.split('.');
const key = keyParts.length > 0 ? keyParts.join('.') : namespace;
const translationNamespace = ns ?? (keyParts.length > 0 ? namespace : '');
// Get translations for the namespace
const t = useTranslations(translationNamespace || undefined);
// Use rich text translation if components are provided
if (components) {
// Convert React elements to functions for next-intl compatibility
const normalizedComponents = Object.entries(components).reduce(
(acc, [key, value]) => {
// If it's already a function, use it directly
if (typeof value === 'function' && !React.isValidElement(value)) {
acc[key] = value as (
chunks: React.ReactNode,
) => React.ReactNode | React.ReactElement;
}
// If it's a React element, clone it with chunks as children
else if (React.isValidElement(value)) {
acc[key] = (chunks: React.ReactNode) => {
// If the element already has children (like nested Trans components),
// preserve them instead of replacing with chunks
const element = value as React.ReactElement<{
children?: React.ReactNode;
}>;
if (element.props.children) {
return element;
}
// Otherwise, clone the element with chunks as children
return React.cloneElement(element, {}, chunks);
};
} else {
acc[key] = value as (
chunks: React.ReactNode,
) => React.ReactNode | React.ReactElement;
}
return acc;
},
{} as Record<
string,
(chunks: React.ReactNode) => React.ReactNode | React.ReactElement
>,
);
let translation: React.ReactNode;
try {
// Fall back to defaults if the translation key doesn't exist
if (!t.has(key as never) && defaults) {
return defaults;
}
// Merge values and normalized components for t.rich()
// Components take precedence over values with the same name
const richParams = {
...values,
...normalizedComponents,
};
translation = t.rich(key as never, richParams as never);
} catch {
// Fallback to defaults or i18nKey if translation fails
translation = defaults ?? i18nKey;
}
return translation;
}
// Regular translation without components
let translation: React.ReactNode;
try {
if (!t.has(key as never) && defaults) {
return defaults;
}
translation = values ? t(key as never, values as never) : t(key as never);
} catch {
// Fallback to defaults or i18nKey if translation fails
translation = defaults ?? i18nKey;
}
return translation;
}

50
packages/ui/src/makerkit/version-updater.tsx
View File

@@ -1,12 +1,15 @@
'use client';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { RocketIcon } from 'lucide-react';
import { env } from '@kit/shared/env';
import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
@@ -27,53 +30,42 @@ let version: string | null = null;
*/
const DEFAULT_REFETCH_INTERVAL = 60;
/**
* Default interval time in seconds to check for new version
*/
const VERSION_UPDATER_REFETCH_INTERVAL_SECONDS =
process.env.NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS;
export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
const { data } = useVersionUpdater(props);
const [dismissed, setDismissed] = useState(false);
const [showDialog, setShowDialog] = useState<boolean>(false);
const [open, setOpen] = useState(false);
useEffect(() => {
if (data?.didChange && !dismissed) {
// eslint-disable-next-line
setShowDialog(data?.didChange ?? false);
}
}, [data?.didChange, dismissed]);
if (data?.didChange && !dismissed && !open) {
setOpen(true);
}
return (
<AlertDialog open={showDialog} onOpenChange={setShowDialog}>
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className={'flex items-center gap-x-2'}>
<RocketIcon className={'h-4'} />
<span>
<Trans i18nKey="common:newVersionAvailable" />
<Trans i18nKey="common.newVersionAvailable" />
</span>
</AlertDialogTitle>
<AlertDialogDescription>
<Trans i18nKey="common:newVersionAvailableDescription" />
<Trans i18nKey="common.newVersionAvailableDescription" />
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<Button
variant={'outline'}
<AlertDialogCancel
onClick={() => {
setShowDialog(false);
setDismissed(true);
}}
>
<Trans i18nKey="common:back" />
</Button>
<Trans i18nKey="common.back" />
</AlertDialogCancel>
<Button onClick={() => window.location.reload()}>
<Trans i18nKey="common:newVersionSubmitButton" />
<Trans i18nKey="common.newVersionSubmitButton" />
</Button>
</AlertDialogFooter>
</AlertDialogContent>
@@ -82,9 +74,11 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
}
function useVersionUpdater(props: { intervalTimeInSecond?: number } = {}) {
const interval = VERSION_UPDATER_REFETCH_INTERVAL_SECONDS
? Number(VERSION_UPDATER_REFETCH_INTERVAL_SECONDS)
: DEFAULT_REFETCH_INTERVAL;
const intervalEnv = env(
'NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS',
);
const interval = intervalEnv ? Number(intervalEnv) : DEFAULT_REFETCH_INTERVAL;
const refetchInterval = (props.intervalTimeInSecond ?? interval) * 1000;
@@ -99,9 +93,7 @@ function useVersionUpdater(props: { intervalTimeInSecond?: number } = {}) {
refetchInterval,
initialData: null,
queryFn: async () => {
const url = new URL('/api/version', process.env.NEXT_PUBLIC_SITE_URL);
const response = await fetch(url.toString());
const response = await fetch('/api/version');
const currentVersion = await response.text();
const oldVersion = version;

108
packages/ui/src/shadcn/accordion.tsx
View File

@@ -1,49 +1,79 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import { Accordion as AccordionPrimitive } from 'radix-ui';
function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
return (
<AccordionPrimitive.Root
data-slot="accordion"
className={cn('flex w-full flex-col', className)}
{...props}
/>
);
}
import { cn } from '../lib/utils';
function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn('not-last:border-b', className)}
{...props}
/>
);
}
const Accordion = AccordionPrimitive.Root;
function AccordionTrigger({
className,
children,
...props
}: AccordionPrimitive.Trigger.Props) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
'group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4',
className,
)}
{...props}
>
{children}
<ChevronDownIcon
data-slot="accordion-trigger-icon"
className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
/>
<ChevronUpIcon
data-slot="accordion-trigger-icon"
className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
/>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
);
}
const AccordionItem: React.FC<
React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>
> = ({ className, ...props }) => (
<AccordionPrimitive.Item className={cn('border-b', className)} {...props} />
);
AccordionItem.displayName = 'AccordionItem';
const AccordionTrigger: React.FC<
React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>
> = ({ className, children, ...props }) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
className={cn(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className,
)}
function AccordionContent({
className,
children,
...props
}: AccordionPrimitive.Panel.Props) {
return (
<AccordionPrimitive.Panel
data-slot="accordion-content"
className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
);
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent: React.FC<
React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>
> = ({ className, children, ...props }) => (
<AccordionPrimitive.Content
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
{...props}
>
<div className={cn('pt-0 pb-4', className)}>{children}</div>
</AccordionPrimitive.Content>
);
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
<div
className={cn(
'[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
className,
)}
>
{children}
</div>
</AccordionPrimitive.Panel>
);
}
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

255
packages/ui/src/shadcn/alert-dialog.tsx
View File

@@ -2,126 +2,187 @@
import * as React from 'react';
import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
import { cn } from '../lib/utils';
import { buttonVariants } from './button';
import { Button } from './button';
const AlertDialog = AlertDialogPrimitive.Root;
function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
return (
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
);
}
const AlertDialogPortal = AlertDialogPrimitive.Portal;
function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
return (
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
);
}
const AlertDialogOverlay: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
> = ({ className, ...props }) => (
<AlertDialogPrimitive.Overlay
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
className,
)}
{...props}
/>
);
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
> = ({ className, ...props }) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
function AlertDialogOverlay({
className,
...props
}: AlertDialogPrimitive.Backdrop.Props) {
return (
<AlertDialogPrimitive.Backdrop
data-slot="alert-dialog-overlay"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
className,
)}
{...props}
/>
</AlertDialogPortal>
);
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
);
}
const AlertDialogHeader = ({
function AlertDialogContent({
className,
size = 'default',
...props
}: AlertDialogPrimitive.Popup.Props & {
size?: 'default' | 'sm';
}) {
return (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Popup
data-slot="alert-dialog-content"
data-size={size}
className={cn(
'group/alert-dialog-content bg-background ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
className,
)}
{...props}
/>
</AlertDialogPortal>
);
}
function AlertDialogHeader({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('flex flex-col gap-y-3 text-center sm:text-left', className)}
{...props}
/>
);
AlertDialogHeader.displayName = 'AlertDialogHeader';
}: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-dialog-header"
className={cn(
'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
className,
)}
{...props}
/>
);
}
const AlertDialogFooter = ({
function AlertDialogFooter({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
);
AlertDialogFooter.displayName = 'AlertDialogFooter';
}: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-dialog-footer"
className={cn(
'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
className,
)}
{...props}
/>
);
}
const AlertDialogTitle: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
> = ({ className, ...props }) => (
<AlertDialogPrimitive.Title
className={cn('text-lg font-semibold', className)}
{...props}
/>
);
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
function AlertDialogMedia({
className,
...props
}: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-dialog-media"
className={cn(
"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
className,
)}
{...props}
/>
);
}
const AlertDialogDescription: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
> = ({ className, ...props }) => (
<AlertDialogPrimitive.Description
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName;
function AlertDialogTitle({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn(
'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
className,
)}
{...props}
/>
);
}
const AlertDialogAction: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
> = ({ className, ...props }) => (
<AlertDialogPrimitive.Action
className={cn(buttonVariants(), className)}
{...props}
/>
);
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
function AlertDialogDescription({
className,
...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
return (
<AlertDialogPrimitive.Description
data-slot="alert-dialog-description"
className={cn(
'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
className,
)}
{...props}
/>
);
}
const AlertDialogCancel: React.FC<
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
> = ({ className, ...props }) => (
<AlertDialogPrimitive.Cancel
className={cn(
buttonVariants({ variant: 'outline' }),
'mt-2 sm:mt-0',
className,
)}
{...props}
/>
);
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
function AlertDialogAction({
className,
...props
}: React.ComponentProps<typeof Button>) {
return (
<Button
data-slot="alert-dialog-action"
className={cn(className)}
{...props}
/>
);
}
function AlertDialogCancel({
className,
variant = 'outline',
size = 'default',
...props
}: AlertDialogPrimitive.Close.Props &
Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
return (
<AlertDialogPrimitive.Close
data-slot="alert-dialog-cancel"
className={cn(className)}
render={<Button variant={variant} size={size} />}
{...props}
/>
);
}
export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
};

96
packages/ui/src/shadcn/alert.tsx
View File

@@ -1,22 +1,19 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../lib/utils';
const alertVariants = cva(
'[&>svg]:text-foreground relative flex w-full flex-col gap-y-2 rounded-lg border bg-linear-to-r px-4 py-3.5 text-sm [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: 'bg-background text-foreground',
default: 'bg-card text-card-foreground',
success: '[&>*]:text-green-600!',
warning: '[&>*]:text-yellow-600!',
info: 'bg-card text-card-foreground',
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
success:
'border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600',
warning:
'border-orange-600/50 text-orange-600 dark:border-orange-600 [&>svg]:text-orange-600',
info: 'border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600',
'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
},
},
defaultVariants: {
@@ -25,37 +22,58 @@ const alertVariants = cva(
},
);
const Alert: React.FC<
React.ComponentPropsWithRef<'div'> & VariantProps<typeof alertVariants>
> = ({ className, variant, ...props }) => (
<div
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
);
Alert.displayName = 'Alert';
function Alert({
className,
variant,
...props
}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
);
}
const AlertTitle: React.FC<React.ComponentPropsWithRef<'h5'>> = ({
function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-title"
className={cn(
'[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3',
className,
)}
{...props}
/>
);
}
function AlertDescription({
className,
...props
}) => (
<h5
className={cn('leading-none font-bold tracking-tight', className)}
{...props}
/>
);
AlertTitle.displayName = 'AlertTitle';
}: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-description"
className={cn(
'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
className,
)}
{...props}
/>
);
}
const AlertDescription: React.FC<React.ComponentPropsWithRef<'div'>> = ({
className,
...props
}) => (
<div
className={cn('text-sm font-normal [&_p]:leading-relaxed', className)}
{...props}
/>
);
AlertDescription.displayName = 'AlertDescription';
function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="alert-action"
className={cn('absolute top-2 right-2', className)}
{...props}
/>
);
}
export { Alert, AlertTitle, AlertDescription };
export { Alert, AlertTitle, AlertDescription, AlertAction };

22
packages/ui/src/shadcn/aspect-ratio.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { cn } from '#lib/utils';
function AspectRatio({
ratio,
className,
...props
}: React.ComponentProps<'div'> & { ratio: number }) {
return (
<div
data-slot="aspect-ratio"
style={
{
'--ratio': ratio,
} as React.CSSProperties
}
className={cn('relative aspect-(--ratio)', className)}
{...props}
/>
);
}
export { AspectRatio };

136
packages/ui/src/shadcn/avatar.tsx
View File

@@ -2,44 +2,108 @@
import * as React from 'react';
import { Avatar as AvatarPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
import { cn } from '../lib/utils';
function Avatar({
className,
size = 'default',
...props
}: AvatarPrimitive.Root.Props & {
size?: 'default' | 'sm' | 'lg';
}) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
data-size={size}
className={cn(
'group/avatar after:border-border relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
className,
)}
{...props}
/>
);
}
const Avatar: React.FC<
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
> = ({ className, ...props }) => (
<AvatarPrimitive.Root
className={cn(
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
className,
)}
{...props}
/>
);
Avatar.displayName = AvatarPrimitive.Root.displayName;
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn(
'aspect-square size-full rounded-full object-cover',
className,
)}
{...props}
/>
);
}
const AvatarImage: React.FC<
React.ComponentPropsWithRef<typeof AvatarPrimitive.Image>
> = ({ className, ...props }) => (
<AvatarPrimitive.Image
className={cn('aspect-square h-full w-full object-cover', className)}
{...props}
/>
);
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
function AvatarFallback({
className,
...props
}: AvatarPrimitive.Fallback.Props) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
className,
)}
{...props}
/>
);
}
const AvatarFallback: React.FC<
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
> = ({ className, ...props }) => (
<AvatarPrimitive.Fallback
className={cn(
'bg-muted flex h-full w-full items-center justify-center rounded-full',
className,
)}
{...props}
/>
);
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
data-slot="avatar-badge"
className={cn(
'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
className,
)}
{...props}
/>
);
}
export { Avatar, AvatarImage, AvatarFallback };
function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="avatar-group"
className={cn(
'group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2',
className,
)}
{...props}
/>
);
}
function AvatarGroupCount({
className,
...props
}: React.ComponentProps<'div'>) {
return (
<div
data-slot="avatar-group-count"
className={cn(
'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
className,
)}
{...props}
/>
);
}
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarBadge,
};

60
packages/ui/src/shadcn/badge.tsx
View File

@@ -1,21 +1,28 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../lib/utils';
const badgeVariants = cva(
'focus:ring-ring inline-flex items-center rounded-md border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden',
'group/badge focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground border-transparent',
secondary: 'bg-secondary text-secondary-foreground border-transparent',
destructive: 'text-destructive border-destructive',
outline: 'text-foreground',
success: 'border-green-500 text-green-500',
warning: 'border-orange-500 text-orange-500',
info: 'border-blue-500 text-blue-500',
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
info: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
secondary:
'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
destructive:
'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
outline:
'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
ghost:
'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
link: 'text-primary underline-offset-4 hover:underline',
success:
'bg-green-600/10 text-green-600 dark:bg-green-600/20 [&>svg]:text-green-600',
warning:
'border-yellow-600 text-yellow-600 dark:border-yellow-600 [&>svg]:text-yellow-600',
},
},
defaultVariants: {
@@ -24,15 +31,26 @@ const badgeVariants = cva(
},
);
export interface BadgeProps
extends
React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
);
function Badge({
className,
variant = 'default',
render,
...props
}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
return useRender({
defaultTagName: 'span',
props: mergeProps<'span'>(
{
className: cn(badgeVariants({ variant }), className),
},
props,
),
render,
state: {
slot: 'badge',
variant,
},
});
}
export { Badge, badgeVariants };

175
packages/ui/src/shadcn/breadcrumb.tsx
View File

@@ -1,106 +1,115 @@
import * as React from 'react';
import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils';
const Breadcrumb: React.FC<
React.ComponentPropsWithoutRef<'nav'> & {
separator?: React.ReactNode;
}
> = ({ ...props }) => <nav aria-label="breadcrumb" {...props} />;
Breadcrumb.displayName = 'Breadcrumb';
const BreadcrumbList: React.FC<React.ComponentPropsWithRef<'ol'>> = ({
className,
...props
}) => (
<ol
className={cn(
'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words',
className,
)}
{...props}
/>
);
BreadcrumbList.displayName = 'BreadcrumbList';
const BreadcrumbItem: React.FC<React.ComponentPropsWithRef<'li'>> = ({
className,
...props
}) => (
<li
className={cn('inline-flex items-center gap-1.5', className)}
{...props}
/>
);
BreadcrumbItem.displayName = 'BreadcrumbItem';
const BreadcrumbLink: React.FC<
React.ComponentPropsWithoutRef<'a'> & {
asChild?: boolean;
}
> = ({ asChild, className, ...props }) => {
const Comp = asChild ? Slot.Root : 'a';
import { cn } from '#lib/utils';
import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
return (
<Comp
<nav
aria-label="breadcrumb"
data-slot="breadcrumb"
className={cn(className)}
{...props}
/>
);
}
function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
return (
<ol
data-slot="breadcrumb-list"
className={cn(
'text-foreground transition-colors hover:underline',
'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word',
className,
)}
{...props}
/>
);
};
BreadcrumbLink.displayName = 'BreadcrumbLink';
}
const BreadcrumbPage: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-item"
className={cn('inline-flex items-center gap-1', className)}
{...props}
/>
);
}
function BreadcrumbLink({
className,
render,
...props
}) => (
<span
role="link"
aria-disabled="true"
aria-current="page"
className={cn('text-foreground font-normal', className)}
{...props}
/>
);
BreadcrumbPage.displayName = 'BreadcrumbPage';
}: useRender.ComponentProps<'a'>) {
return useRender({
defaultTagName: 'a',
props: mergeProps<'a'>(
{
className: cn('hover:text-foreground transition-colors', className),
},
props,
),
render,
state: {
slot: 'breadcrumb-link',
},
});
}
const BreadcrumbSeparator = ({
function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-page"
role="link"
aria-disabled="true"
aria-current="page"
className={cn('text-foreground font-normal', className)}
{...props}
/>
);
}
function BreadcrumbSeparator({
children,
className,
...props
}: React.ComponentProps<'li'>) => (
<li
role="presentation"
aria-hidden="true"
className={cn('[&>svg]:size-3.5', className)}
{...props}
>
{children ?? <ChevronRightIcon />}
</li>
);
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
}: React.ComponentProps<'li'>) {
return (
<li
data-slot="breadcrumb-separator"
role="presentation"
aria-hidden="true"
className={cn('[&>svg]:size-3.5', className)}
{...props}
>
{children ?? <ChevronRightIcon />}
</li>
);
}
const BreadcrumbEllipsis = ({
function BreadcrumbEllipsis({
className,
...props
}: React.ComponentProps<'span'>) => (
<span
role="presentation"
aria-hidden="true"
className={cn('flex h-9 w-9 items-center justify-center', className)}
{...props}
>
<DotsHorizontalIcon className="h-4 w-4" />
<span className="sr-only">More</span>
</span>
);
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="breadcrumb-ellipsis"
role="presentation"
aria-hidden="true"
className={cn(
'flex size-5 items-center justify-center [&>svg]:size-4',
className,
)}
{...props}
>
<MoreHorizontalIcon />
<span className="sr-only">More</span>
</span>
);
}
export {
Breadcrumb,

46
packages/ui/src/shadcn/button-group.tsx
View File

@@ -1,18 +1,19 @@
import { cn } from '#lib/utils';
import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { type VariantProps, cva } from 'class-variance-authority';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils/cn';
import { Separator } from './separator';
const buttonGroupVariants = cva(
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
{
variants: {
orientation: {
horizontal:
'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
'*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
vertical:
'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
},
},
defaultVariants: {
@@ -39,22 +40,25 @@ function ButtonGroup({
function ButtonGroupText({
className,
asChild = false,
render,
...props
}: React.ComponentProps<'div'> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
className={cn(
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
}: useRender.ComponentProps<'div'>) {
return useRender({
defaultTagName: 'div',
props: mergeProps<'div'>(
{
className: cn(
"bg-muted flex items-center gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className,
),
},
props,
),
render,
state: {
slot: 'button-group-text',
},
});
}
function ButtonGroupSeparator({
@@ -67,7 +71,7 @@ function ButtonGroupSeparator({
data-slot="button-group-separator"
orientation={orientation}
className={cn(
'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
'bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
className,
)}
{...props}

70
packages/ui/src/shadcn/button.tsx
View File

@@ -1,32 +1,39 @@
import * as React from 'react';
'use client';
import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
import { Button as ButtonPrimitive } from '@base-ui/react/button';
import { type VariantProps, cva } from 'class-variance-authority';
const buttonVariants = cva(
'focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
"group/button focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default:
'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-xs',
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
outline:
'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-xs',
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'decoration-primary underline-offset-4 hover:underline',
'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
ghost:
'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
destructive:
'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
link: 'text-primary underline-offset-4 hover:underline',
custom: '',
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9',
default:
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
icon: 'size-8',
'icon-xs':
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
'icon-sm':
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
'icon-lg': 'size-9',
custom: '',
},
},
defaultVariants: {
@@ -36,30 +43,19 @@ const buttonVariants = cva(
},
);
export interface ButtonProps
extends
React.ComponentPropsWithRef<'button'>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button: React.FC<ButtonProps> = ({
function Button({
className,
variant,
size,
asChild = false,
variant = 'default',
size = 'default',
...props
}) => {
const Comp = asChild ? Slot.Root : 'button';
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
return (
<Comp
<ButtonPrimitive
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
};
Button.displayName = 'Button';
}
export { Button, buttonVariants };

52
packages/ui/src/shadcn/calendar.tsx
View File

@@ -2,14 +2,19 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import {
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
} from 'lucide-react';
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
import {
type DayButton,
DayPicker,
type Locale,
getDefaultClassNames,
} from 'react-day-picker';
import { cn } from '../lib/utils';
import { Button, buttonVariants } from './button';
function Calendar({
@@ -18,6 +23,7 @@ function Calendar({
showOutsideDays = true,
captionLayout = 'label',
buttonVariant = 'ghost',
locale,
formatters,
components,
...props
@@ -30,15 +36,16 @@ function Calendar({
<DayPicker
showOutsideDays={showOutsideDays}
className={cn(
'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className,
)}
captionLayout={captionLayout}
locale={locale}
formatters={{
formatMonthDropdown: (date) =>
date.toLocaleString('default', { month: 'short' }),
date.toLocaleString(locale?.code, { month: 'short' }),
...formatters,
}}
classNames={{
@@ -71,21 +78,24 @@ function Calendar({
defaultClassNames.dropdowns,
),
dropdown_root: cn(
'has-focus:border-ring border-input has-focus:ring-ring/50 relative rounded-md border shadow-xs has-focus:ring-[3px]',
'relative rounded-(--cell-radius)',
defaultClassNames.dropdown_root,
),
dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
dropdown: cn(
'bg-popover absolute inset-0 opacity-0',
defaultClassNames.dropdown,
),
caption_label: cn(
'font-medium select-none',
captionLayout === 'label'
? 'text-sm'
: '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5',
: '[&>svg]:text-muted-foreground flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5',
defaultClassNames.caption_label,
),
table: 'w-full border-collapse',
weekdays: cn('flex', defaultClassNames.weekdays),
weekday: cn(
'text-muted-foreground flex-1 rounded-md text-[0.8rem] font-normal select-none',
'text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none',
defaultClassNames.weekday,
),
week: cn('mt-2 flex w-full', defaultClassNames.week),
@@ -98,17 +108,23 @@ function Calendar({
defaultClassNames.week_number,
),
day: cn(
'group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
props.showWeekNumber
? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
defaultClassNames.day,
),
range_start: cn(
'bg-accent rounded-l-md',
'bg-muted after:bg-muted relative isolate z-0 rounded-l-(--cell-radius) after:absolute after:inset-y-0 after:right-0 after:w-4',
defaultClassNames.range_start,
),
range_middle: cn('rounded-none', defaultClassNames.range_middle),
range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),
range_end: cn(
'bg-muted after:bg-muted relative isolate z-0 rounded-r-(--cell-radius) after:absolute after:inset-y-0 after:left-0 after:w-4',
defaultClassNames.range_end,
),
today: cn(
'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
'bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none',
defaultClassNames.today,
),
outside: cn(
@@ -153,7 +169,9 @@ function Calendar({
<ChevronDownIcon className={cn('size-4', className)} {...props} />
);
},
DayButton: CalendarDayButton,
DayButton: ({ ...props }) => (
<CalendarDayButton locale={locale} {...props} />
),
WeekNumber: ({ children, ...props }) => {
return (
<td {...props}>
@@ -174,8 +192,9 @@ function CalendarDayButton({
className,
day,
modifiers,
locale,
...props
}: React.ComponentProps<typeof DayButton>) {
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
const defaultClassNames = getDefaultClassNames();
const ref = React.useRef<HTMLButtonElement>(null);
@@ -185,10 +204,9 @@ function CalendarDayButton({
return (
<Button
ref={ref}
variant="ghost"
size="icon"
data-day={day.date.toLocaleDateString()}
data-day={day.date.toLocaleDateString(locale?.code)}
data-selected-single={
modifiers.selected &&
!modifiers.range_start &&
@@ -199,7 +217,7 @@ function CalendarDayButton({
data-range-end={modifiers.range_end}
data-range-middle={modifiers.range_middle}
className={cn(
'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
defaultClassNames.day,
className,
)}

129
packages/ui/src/shadcn/card.tsx
View File

@@ -1,64 +1,103 @@
import * as React from 'react';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
function Card({
className,
size = 'default',
...props
}) => (
<div
className={cn('bg-card text-card-foreground rounded-lg border', className)}
{...props}
/>
);
Card.displayName = 'Card';
}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
return (
<div
data-slot="card"
data-size={size}
className={cn(
'group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
className,
)}
{...props}
/>
);
}
const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
className,
...props
}) => (
<div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
);
CardHeader.displayName = 'CardHeader';
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-header"
className={cn(
'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
className,
)}
{...props}
/>
);
}
const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
className,
...props
}) => (
<h3
className={cn('leading-none font-semibold tracking-tight', className)}
{...props}
/>
);
CardTitle.displayName = 'CardTitle';
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-title"
className={cn(
'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
className,
)}
{...props}
/>
);
}
const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
className,
...props
}) => (
<p className={cn('text-muted-foreground text-sm', className)} {...props} />
);
CardDescription.displayName = 'CardDescription';
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-description"
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
}
const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
className,
...props
}) => <div className={cn('p-6 pt-0', className)} {...props} />;
CardContent.displayName = 'CardContent';
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-action"
className={cn(
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
className,
)}
{...props}
/>
);
}
const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
className,
...props
}) => (
<div className={cn('flex items-center p-6 pt-0', className)} {...props} />
);
CardFooter.displayName = 'CardFooter';
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-content"
className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
{...props}
/>
);
}
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="card-footer"
className={cn(
'bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3',
className,
)}
{...props}
/>
);
}
export {
Card,
CardHeader,
CardFooter,
CardTitle,
CardAction,
CardDescription,
CardContent,
};

243
packages/ui/src/shadcn/carousel.tsx Normal file
View File

@@ -0,0 +1,243 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from 'embla-carousel-react';
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
import { Button } from './button';
type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];
type CarouselProps = {
opts?: CarouselOptions;
plugins?: CarouselPlugin;
orientation?: 'horizontal' | 'vertical';
setApi?: (api: CarouselApi) => void;
};
type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
api: ReturnType<typeof useEmblaCarousel>[1];
scrollPrev: () => void;
scrollNext: () => void;
canScrollPrev: boolean;
canScrollNext: boolean;
} & CarouselProps;
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
function useCarousel() {
const context = React.useContext(CarouselContext);
if (!context) {
throw new Error('useCarousel must be used within a <Carousel />');
}
return context;
}
function Carousel({
orientation = 'horizontal',
opts,
setApi,
plugins,
className,
children,
...props
}: React.ComponentProps<'div'> & CarouselProps) {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === 'horizontal' ? 'x' : 'y',
},
plugins,
);
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
const [canScrollNext, setCanScrollNext] = React.useState(false);
const onSelect = React.useCallback((api: CarouselApi) => {
if (!api) return;
setCanScrollPrev(api.canScrollPrev());
setCanScrollNext(api.canScrollNext());
}, []);
const scrollPrev = React.useCallback(() => {
api?.scrollPrev();
}, [api]);
const scrollNext = React.useCallback(() => {
api?.scrollNext();
}, [api]);
const handleKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'ArrowLeft') {
event.preventDefault();
scrollPrev();
} else if (event.key === 'ArrowRight') {
event.preventDefault();
scrollNext();
}
},
[scrollPrev, scrollNext],
);
React.useEffect(() => {
if (!api || !setApi) return;
setApi(api);
}, [api, setApi]);
React.useEffect(() => {
if (!api) return;
onSelect(api);
api.on('reInit', onSelect);
api.on('select', onSelect);
return () => {
api?.off('select', onSelect);
};
}, [api, onSelect]);
return (
<CarouselContext.Provider
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
onKeyDownCapture={handleKeyDown}
className={cn('relative', className)}
role="region"
aria-roledescription="carousel"
data-slot="carousel"
{...props}
>
{children}
</div>
</CarouselContext.Provider>
);
}
function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
const { carouselRef, orientation } = useCarousel();
return (
<div
ref={carouselRef}
className="overflow-hidden"
data-slot="carousel-content"
>
<div
className={cn(
'flex',
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
className,
)}
{...props}
/>
</div>
);
}
function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
const { orientation } = useCarousel();
return (
<div
role="group"
aria-roledescription="slide"
data-slot="carousel-item"
className={cn(
'min-w-0 shrink-0 grow-0 basis-full',
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
className,
)}
{...props}
/>
);
}
function CarouselPrevious({
className,
variant = 'outline',
size = 'icon-sm',
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
return (
<Button
data-slot="carousel-previous"
variant={variant}
size={size}
className={cn(
'absolute touch-manipulation rounded-full',
orientation === 'horizontal'
? 'top-1/2 -left-12 -translate-y-1/2'
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
className,
)}
disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ChevronLeftIcon />
<span className="sr-only">Previous slide</span>
</Button>
);
}
function CarouselNext({
className,
variant = 'outline',
size = 'icon-sm',
...props
}: React.ComponentProps<typeof Button>) {
const { orientation, scrollNext, canScrollNext } = useCarousel();
return (
<Button
data-slot="carousel-next"
variant={variant}
size={size}
className={cn(
'absolute touch-manipulation rounded-full',
orientation === 'horizontal'
? 'top-1/2 -right-12 -translate-y-1/2'
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
className,
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ChevronRightIcon />
<span className="sr-only">Next slide</span>
</Button>
);
}
export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
useCarousel,
};

166
packages/ui/src/shadcn/chart.tsx
View File

@@ -3,27 +3,64 @@
import * as React from 'react';
import * as RechartsPrimitive from 'recharts';
import type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
import {
NameType,
Payload,
ValueType,
} from 'recharts/types/component/DefaultTooltipContent';
import type { Props as LegendProps } from 'recharts/types/component/Legend';
import { TooltipContentProps } from 'recharts/types/component/Tooltip';
import { cn } from '../lib/utils';
import { cn } from '@kit/ui/utils';
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const;
export type ChartConfig = Record<
string,
{
export type ChartConfig = {
[k in string]: {
label?: React.ReactNode;
icon?: React.ComponentType;
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record<keyof typeof THEMES, string> }
)
>;
);
};
type ChartContextProps = {
config: ChartConfig;
};
export type CustomTooltipProps = TooltipContentProps<ValueType, NameType> & {
className?: string;
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: 'line' | 'dot' | 'dashed';
nameKey?: string;
labelKey?: string;
labelFormatter?: (
label: TooltipContentProps<number, string>['label'],
payload: TooltipContentProps<number, string>['payload'],
) => React.ReactNode;
formatter?: (
value: number | string,
name: string,
item: Payload<number | string, string>,
index: number,
payload: ReadonlyArray<Payload<number | string, string>>,
) => React.ReactNode;
labelClassName?: string;
color?: string;
};
export type ChartLegendContentProps = {
className?: string;
hideIcon?: boolean;
verticalAlign?: LegendProps['verticalAlign'];
payload?: LegendPayload[];
nameKey?: string;
};
const ChartContext = React.createContext<ChartContextProps | null>(null);
function useChart() {
@@ -36,20 +73,25 @@ function useChart() {
return context;
}
const ChartContainer: React.FC<
React.ComponentProps<'div'> & {
config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>['children'];
}
> = ({ id, className, children, config, ...props }) => {
function ChartContainer({
id,
className,
children,
config,
...props
}: React.ComponentProps<'div'> & {
config: ChartConfig;
children: React.ComponentProps<
typeof RechartsPrimitive.ResponsiveContainer
>['children'];
}) {
const uniqueId = React.useId();
const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
return (
<ChartContext.Provider value={{ config }}>
<div
data-slot="chart"
data-chart={chartId}
className={cn(
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
@@ -64,12 +106,11 @@ const ChartContainer: React.FC<
</div>
</ChartContext.Provider>
);
};
ChartContainer.displayName = 'Chart';
}
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
const colorConfig = Object.entries(config).filter(
([_, config]) => config.theme ?? config.color,
([, config]) => config.theme || config.color,
);
if (!colorConfig.length) {
@@ -82,17 +123,17 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
__html: Object.entries(THEMES)
.map(
([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
})
.join('\n')}
}
`,
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
})
.join('\n')}
}
`,
)
.join('\n'),
}}
@@ -102,46 +143,39 @@ ${colorConfig
const ChartTooltip = RechartsPrimitive.Tooltip;
const ChartTooltipContent: React.FC<
React.ComponentPropsWithRef<typeof RechartsPrimitive.Tooltip> &
React.ComponentPropsWithRef<'div'> & {
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: 'line' | 'dot' | 'dashed';
nameKey?: string;
labelKey?: string;
}
> = ({
ref,
function ChartTooltipContent({
active,
payload,
label,
className,
indicator = 'dot',
hideLabel = false,
hideIndicator = false,
label,
labelFormatter,
labelClassName,
formatter,
labelClassName,
color,
nameKey,
labelKey,
}) => {
}: CustomTooltipProps) {
const { config } = useChart();
const tooltipLabel = React.useMemo(() => {
if (hideLabel ?? !payload?.length) {
if (hideLabel || !payload?.length) {
return null;
}
const [item] = payload;
const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value = (() => {
const v =
!labelKey && typeof label === 'string'
? (config[label as keyof typeof config]?.label ?? label)
: itemConfig?.label;
const value =
!labelKey && typeof label === 'string'
? (config[label]?.label ?? label)
: itemConfig?.label;
return typeof v === 'string' || typeof v === 'number' ? v : undefined;
})();
if (labelFormatter) {
return (
@@ -174,7 +208,6 @@ const ChartTooltipContent: React.FC<
return (
<div
ref={ref}
className={cn(
'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
className,
@@ -183,9 +216,9 @@ const ChartTooltipContent: React.FC<
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{payload.map((item, index) => {
const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
const key = `${nameKey || item.name || item.dataKey || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color ?? item.payload.fill ?? item.color;
const indicatorColor = color || item.payload.fill || item.color;
return (
<div
@@ -232,7 +265,7 @@ const ChartTooltipContent: React.FC<
<div className="grid gap-1.5">
{nestLabel ? tooltipLabel : null}
<span className="text-muted-foreground">
{itemConfig?.label ?? item.name}
{itemConfig?.label || item.name}
</span>
</div>
{item.value && (
@@ -249,26 +282,17 @@ const ChartTooltipContent: React.FC<
</div>
</div>
);
};
ChartTooltipContent.displayName = 'ChartTooltip';
}
const ChartLegend = RechartsPrimitive.Legend;
const ChartLegendContent: React.FC<
React.ComponentPropsWithRef<'div'> &
Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
hideIcon?: boolean;
nameKey?: string;
}
> = ({
function ChartLegendContent({
className,
hideIcon = false,
payload,
verticalAlign = 'bottom',
nameKey,
ref,
}) => {
}: ChartLegendContentProps) {
const { config } = useChart();
if (!payload?.length) {
@@ -277,7 +301,6 @@ const ChartLegendContent: React.FC<
return (
<div
ref={ref}
className={cn(
'flex items-center justify-center gap-4',
verticalAlign === 'top' ? 'pb-3' : 'pt-3',
@@ -285,7 +308,7 @@ const ChartLegendContent: React.FC<
)}
>
{payload.map((item) => {
const key = `${nameKey ?? item.dataKey ?? 'value'}`;
const key = `${nameKey || item.dataKey || 'value'}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
return (
@@ -311,8 +334,7 @@ const ChartLegendContent: React.FC<
})}
</div>
);
};
ChartLegendContent.displayName = 'ChartLegend';
}
// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
@@ -320,7 +342,7 @@ function getPayloadConfigFromPayload(
payload: unknown,
key: string,
) {
if (typeof payload !== 'object' || !payload) {
if (typeof payload !== 'object' || payload === null) {
return undefined;
}
@@ -348,7 +370,9 @@ function getPayloadConfigFromPayload(
] as string;
}
return configLabelKey in config ? config[configLabelKey] : config[key];
return configLabelKey in config
? config[configLabelKey]
: config[key as keyof typeof config];
}
export {

44
packages/ui/src/shadcn/checkbox.tsx
View File

@@ -1,29 +1,27 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
import { CheckIcon } from 'lucide-react';
import { CheckIcon } from '@radix-ui/react-icons';
import { Checkbox as CheckboxPrimitive } from 'radix-ui';
import { cn } from '../lib/utils';
const Checkbox: React.FC<
React.ComponentPropsWithRef<typeof CheckboxPrimitive.Root>
> = ({ className, ...props }) => (
<CheckboxPrimitive.Root
className={cn(
'peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-xs border shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn('flex items-center justify-center text-current')}
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
return (
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
className,
)}
{...props}
>
<CheckIcon className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
>
<CheckIcon />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
}
export { Checkbox };

18
packages/ui/src/shadcn/collapsible.tsx
View File

@@ -1,11 +1,21 @@
'use client';
import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
const Collapsible = CollapsiblePrimitive.Root;
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
return (
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
);
}
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
return (
<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
);
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent };

301
packages/ui/src/shadcn/combobox.tsx Normal file
View File

@@ -0,0 +1,301 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Combobox as ComboboxPrimitive } from '@base-ui/react';
import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
import { Button } from './button';
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from './input-group';
const Combobox = ComboboxPrimitive.Root;
function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
}
function ComboboxTrigger({
className,
children,
...props
}: ComboboxPrimitive.Trigger.Props) {
return (
<ComboboxPrimitive.Trigger
data-slot="combobox-trigger"
className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
{...props}
>
{children}
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
</ComboboxPrimitive.Trigger>
);
}
function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
return (
<ComboboxPrimitive.Clear
data-slot="combobox-clear"
render={<InputGroupButton variant="ghost" size="icon-xs" />}
className={cn(className)}
{...props}
>
<XIcon className="pointer-events-none" />
</ComboboxPrimitive.Clear>
);
}
function ComboboxInput({
className,
children,
disabled = false,
showTrigger = true,
showClear = false,
...props
}: ComboboxPrimitive.Input.Props & {
showTrigger?: boolean;
showClear?: boolean;
}) {
return (
<InputGroup className={cn('w-auto', className)}>
<ComboboxPrimitive.Input
render={<InputGroupInput disabled={disabled} />}
{...props}
/>
<InputGroupAddon align="inline-end">
{showTrigger && (
<InputGroupButton
size="icon-xs"
variant="ghost"
render={<ComboboxTrigger />}
data-slot="input-group-button"
className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
disabled={disabled}
/>
)}
{showClear && <ComboboxClear disabled={disabled} />}
</InputGroupAddon>
{children}
</InputGroup>
);
}
function ComboboxContent({
className,
side = 'bottom',
sideOffset = 6,
align = 'start',
alignOffset = 0,
anchor,
...props
}: ComboboxPrimitive.Popup.Props &
Pick<
ComboboxPrimitive.Positioner.Props,
'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
>) {
return (
<ComboboxPrimitive.Portal>
<ComboboxPrimitive.Positioner
side={side}
sideOffset={sideOffset}
align={align}
alignOffset={alignOffset}
anchor={anchor}
className="isolate z-50"
>
<ComboboxPrimitive.Popup
data-slot="combobox-content"
data-chips={!!anchor}
className={cn(
'group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
className,
)}
{...props}
/>
</ComboboxPrimitive.Positioner>
</ComboboxPrimitive.Portal>
);
}
function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
return (
<ComboboxPrimitive.List
data-slot="combobox-list"
className={cn(
'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
className,
)}
{...props}
/>
);
}
function ComboboxItem({
className,
children,
...props
}: ComboboxPrimitive.Item.Props) {
return (
<ComboboxPrimitive.Item
data-slot="combobox-item"
className={cn(
"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
{children}
<ComboboxPrimitive.ItemIndicator
render={
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
}
>
<CheckIcon className="pointer-events-none" />
</ComboboxPrimitive.ItemIndicator>
</ComboboxPrimitive.Item>
);
}
function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
return (
<ComboboxPrimitive.Group
data-slot="combobox-group"
className={cn(className)}
{...props}
/>
);
}
function ComboboxLabel({
className,
...props
}: ComboboxPrimitive.GroupLabel.Props) {
return (
<ComboboxPrimitive.GroupLabel
data-slot="combobox-label"
className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
{...props}
/>
);
}
function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
return (
<ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
);
}
function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
return (
<ComboboxPrimitive.Empty
data-slot="combobox-empty"
className={cn(
'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
className,
)}
{...props}
/>
);
}
function ComboboxSeparator({
className,
...props
}: ComboboxPrimitive.Separator.Props) {
return (
<ComboboxPrimitive.Separator
data-slot="combobox-separator"
className={cn('bg-border -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function ComboboxChips({
className,
...props
}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
ComboboxPrimitive.Chips.Props) {
return (
<ComboboxPrimitive.Chips
data-slot="combobox-chips"
className={cn(
'border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
className,
)}
{...props}
/>
);
}
function ComboboxChip({
className,
children,
showRemove = true,
...props
}: ComboboxPrimitive.Chip.Props & {
showRemove?: boolean;
}) {
return (
<ComboboxPrimitive.Chip
data-slot="combobox-chip"
className={cn(
'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
className,
)}
{...props}
>
{children}
{showRemove && (
<ComboboxPrimitive.ChipRemove
render={<Button variant="ghost" size="icon-xs" />}
className="-ml-1 opacity-50 hover:opacity-100"
data-slot="combobox-chip-remove"
>
<XIcon className="pointer-events-none" />
</ComboboxPrimitive.ChipRemove>
)}
</ComboboxPrimitive.Chip>
);
}
function ComboboxChipsInput({
className,
...props
}: ComboboxPrimitive.Input.Props) {
return (
<ComboboxPrimitive.Input
data-slot="combobox-chip-input"
className={cn('min-w-16 flex-1 outline-none', className)}
{...props}
/>
);
}
function useComboboxAnchor() {
return React.useRef<HTMLDivElement | null>(null);
}
export {
Combobox,
ComboboxInput,
ComboboxContent,
ComboboxList,
ComboboxItem,
ComboboxGroup,
ComboboxLabel,
ComboboxCollection,
ComboboxEmpty,
ComboboxSeparator,
ComboboxChips,
ComboboxChip,
ComboboxChipsInput,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
};

262
packages/ui/src/shadcn/command.tsx
View File

@@ -2,128 +2,184 @@
import * as React from 'react';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
import { cn } from '#lib/utils';
import { Command as CommandPrimitive } from 'cmdk';
import { CheckIcon, SearchIcon } from 'lucide-react';
import { cn } from '../lib/utils';
import { Dialog, DialogContent } from './dialog';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from './dialog';
import { InputGroup, InputGroupAddon } from './input-group';
const Command: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive>
> = ({ className, ...props }) => (
<CommandPrimitive
className={cn(
'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
className,
)}
{...props}
/>
);
Command.displayName = CommandPrimitive.displayName;
function Command({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive>) {
return (
<CommandPrimitive
data-slot="command"
className={cn(
'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1',
className,
)}
{...props}
/>
);
}
type CommandDialogProps = React.ComponentProps<typeof Dialog>;
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
function CommandDialog({
title = 'Command Palette',
description = 'Search for a command to run...',
children,
className,
showCloseButton = false,
...props
}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
title?: string;
description?: string;
className?: string;
showCloseButton?: boolean;
children: React.ReactNode;
}) {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
<DialogHeader className="sr-only">
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
<DialogContent
className={cn(
'top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0',
className,
)}
showCloseButton={showCloseButton}
>
{children}
</DialogContent>
</Dialog>
);
};
}
const CommandInput: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.Input>
> = ({ className, ...props }) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
className={cn(
'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
/>
</div>
);
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.List>
> = ({ className, ...props }) => (
<CommandPrimitive.List
className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
{...props}
/>
);
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.Empty>
> = (props) => (
<CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
);
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.Group>
> = ({ className, ...props }) => (
<CommandPrimitive.Group
className={cn(
'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
className,
)}
{...props}
/>
);
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.Separator>
> = ({ className, ...props }) => (
<CommandPrimitive.Separator
className={cn('bg-border -mx-1 h-px', className)}
{...props}
/>
);
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem: React.FC<
React.ComponentPropsWithRef<typeof CommandPrimitive.Item>
> = ({ className, ...props }) => (
<CommandPrimitive.Item
className={cn(
"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
className,
)}
{...props}
/>
);
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({
function CommandInput({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<span
<div data-slot="command-input-wrapper" className="p-1 pb-0">
<InputGroup className="border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
<CommandPrimitive.Input
data-slot="command-input"
className={cn(
'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
/>
<InputGroupAddon>
<SearchIcon className="size-4 shrink-0 opacity-50" />
</InputGroupAddon>
</InputGroup>
</div>
);
}
function CommandList({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
return (
<CommandPrimitive.List
data-slot="command-list"
className={cn(
'text-muted-foreground ml-auto text-xs tracking-widest',
'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
className,
)}
{...props}
/>
);
};
CommandShortcut.displayName = 'CommandShortcut';
}
function CommandEmpty({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
return (
<CommandPrimitive.Empty
data-slot="command-empty"
className={cn('py-6 text-center text-sm', className)}
{...props}
/>
);
}
function CommandGroup({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn(
'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
className,
)}
{...props}
/>
);
}
function CommandSeparator({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
return (
<CommandPrimitive.Separator
data-slot="command-separator"
className={cn('bg-border -mx-1 h-px', className)}
{...props}
/>
);
}
function CommandItem({
className,
children,
...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
return (
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
{children}
<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
</CommandPrimitive.Item>
);
}
function CommandShortcut({
className,
...props
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="command-shortcut"
className={cn(
'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props}
/>
);
}
export {
Command,

272
packages/ui/src/shadcn/context-menu.tsx Normal file
View File

@@ -0,0 +1,272 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
import { CheckIcon, ChevronRightIcon } from 'lucide-react';
function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
}
function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
return (
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
);
}
function ContextMenuTrigger({
className,
...props
}: ContextMenuPrimitive.Trigger.Props) {
return (
<ContextMenuPrimitive.Trigger
data-slot="context-menu-trigger"
className={cn('select-none', className)}
{...props}
/>
);
}
function ContextMenuContent({
className,
align = 'start',
alignOffset = 4,
side = 'right',
sideOffset = 0,
...props
}: ContextMenuPrimitive.Popup.Props &
Pick<
ContextMenuPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset'
>) {
return (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Positioner
className="isolate z-50 outline-none"
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
>
<ContextMenuPrimitive.Popup
data-slot="context-menu-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none',
className,
)}
{...props}
/>
</ContextMenuPrimitive.Positioner>
</ContextMenuPrimitive.Portal>
);
}
function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
return (
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
);
}
function ContextMenuLabel({
className,
inset,
...props
}: ContextMenuPrimitive.GroupLabel.Props & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.GroupLabel
data-slot="context-menu-label"
data-inset={inset}
className={cn(
'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
className,
)}
{...props}
/>
);
}
function ContextMenuItem({
className,
inset,
variant = 'default',
...props
}: ContextMenuPrimitive.Item.Props & {
inset?: boolean;
variant?: 'default' | 'destructive';
}) {
return (
<ContextMenuPrimitive.Item
data-slot="context-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"group/context-menu-item focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
}
function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
return (
<ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
);
}
function ContextMenuSubTrigger({
className,
inset,
children,
...props
}: ContextMenuPrimitive.SubmenuTrigger.Props & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.SubmenuTrigger
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
</ContextMenuPrimitive.SubmenuTrigger>
);
}
function ContextMenuSubContent({
...props
}: React.ComponentProps<typeof ContextMenuContent>) {
return (
<ContextMenuContent
data-slot="context-menu-sub-content"
className="shadow-lg"
side="right"
{...props}
/>
);
}
function ContextMenuCheckboxItem({
className,
children,
checked,
inset,
...props
}: ContextMenuPrimitive.CheckboxItem.Props & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute right-2">
<ContextMenuPrimitive.CheckboxItemIndicator>
<CheckIcon />
</ContextMenuPrimitive.CheckboxItemIndicator>
</span>
{children}
</ContextMenuPrimitive.CheckboxItem>
);
}
function ContextMenuRadioGroup({
...props
}: ContextMenuPrimitive.RadioGroup.Props) {
return (
<ContextMenuPrimitive.RadioGroup
data-slot="context-menu-radio-group"
{...props}
/>
);
}
function ContextMenuRadioItem({
className,
children,
inset,
...props
}: ContextMenuPrimitive.RadioItem.Props & {
inset?: boolean;
}) {
return (
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<span className="pointer-events-none absolute right-2">
<ContextMenuPrimitive.RadioItemIndicator>
<CheckIcon />
</ContextMenuPrimitive.RadioItemIndicator>
</span>
{children}
</ContextMenuPrimitive.RadioItem>
);
}
function ContextMenuSeparator({
className,
...props
}: ContextMenuPrimitive.Separator.Props) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
className={cn('bg-border -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function ContextMenuShortcut({
className,
...props
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="context-menu-shortcut"
className={cn(
'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props}
/>
);
}
export {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuCheckboxItem,
ContextMenuRadioItem,
ContextMenuLabel,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuGroup,
ContextMenuPortal,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuRadioGroup,
};

2
packages/ui/src/shadcn/data-table.tsx
View File

@@ -75,7 +75,7 @@ export function DataTable<TData, TValue>({
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
<Trans i18nKey={'common:noData'} />
<Trans i18nKey={'common.noData'} />
</TableCell>
</TableRow>
)}

217
packages/ui/src/shadcn/dialog.tsx
View File

@@ -2,111 +2,156 @@
import * as React from 'react';
import { Cross2Icon } from '@radix-ui/react-icons';
import { Dialog as DialogPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
import { XIcon } from 'lucide-react';
import { cn } from '../lib/utils';
import { Button } from './button';
const Dialog = DialogPrimitive.Root;
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
const DialogTrigger = DialogPrimitive.Trigger;
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
const DialogPortal = DialogPrimitive.Portal;
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
const DialogClose = DialogPrimitive.Close;
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
const DialogOverlay: React.FC<
React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>
> = ({ className, ...props }) => (
<DialogPrimitive.Overlay
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
className,
)}
{...props}
/>
);
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent: React.FC<
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
> = ({ className, children, ...props }) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
function DialogOverlay({
className,
...props
}: DialogPrimitive.Backdrop.Props) {
return (
<DialogPrimitive.Backdrop
data-slot="dialog-overlay"
className={cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
className,
)}
{...props}
/>
);
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: DialogPrimitive.Popup.Props & {
showCloseButton?: boolean;
}) {
return (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Popup
data-slot="dialog-content"
className={cn(
'bg-background ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
className,
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
render={
<Button
variant="ghost"
className="absolute top-2 right-2"
size="icon-sm"
/>
}
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Popup>
</DialogPortal>
);
}
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="dialog-header"
className={cn('flex flex-col gap-2', className)}
{...props}
/>
);
}
function DialogFooter({
className,
showCloseButton = false,
children,
...props
}: React.ComponentProps<'div'> & {
showCloseButton?: boolean;
}) {
return (
<div
data-slot="dialog-footer"
className={cn(
'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end',
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
);
DialogContent.displayName = DialogPrimitive.Content.displayName;
{showCloseButton && (
<DialogPrimitive.Close render={<Button variant="outline" />}>
Close
</DialogPrimitive.Close>
)}
</div>
);
}
const DialogHeader = ({
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn('text-base leading-none font-medium', className)}
{...props}
/>
);
}
function DialogDescription({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('flex flex-col space-y-1.5 text-left', className)}
{...props}
/>
);
DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
);
DialogFooter.displayName = 'DialogFooter';
const DialogTitle: React.FC<
React.ComponentPropsWithRef<typeof DialogPrimitive.Title>
> = ({ className, ...props }) => (
<DialogPrimitive.Title
className={cn(
'text-lg leading-none font-semibold tracking-tight',
className,
)}
{...props}
/>
);
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription: React.FC<
React.ComponentPropsWithRef<typeof DialogPrimitive.Description>
> = ({ className, ...props }) => (
<DialogPrimitive.Description
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
DialogDescription.displayName = DialogPrimitive.Description.displayName;
}: DialogPrimitive.Description.Props) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn(
'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
className,
)}
{...props}
/>
);
}
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogTrigger,
DialogClose,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
};

6
packages/ui/src/shadcn/direction.tsx Normal file
View File

@@ -0,0 +1,6 @@
'use client';
export {
DirectionProvider,
useDirection,
} from '@base-ui/react/direction-provider';

131
packages/ui/src/shadcn/drawer.tsx Normal file
View File

@@ -0,0 +1,131 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Drawer as DrawerPrimitive } from 'vaul';
function Drawer({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
}
function DrawerTrigger({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
}
function DrawerPortal({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
}
function DrawerClose({
...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
}
function DrawerOverlay({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
return (
<DrawerPrimitive.Overlay
data-slot="drawer-overlay"
className={cn(
'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs',
className,
)}
{...props}
/>
);
}
function DrawerContent({
className,
children,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
return (
<DrawerPortal data-slot="drawer-portal">
<DrawerOverlay />
<DrawerPrimitive.Content
data-slot="drawer-content"
className={cn(
'group/drawer-content bg-background fixed z-50 flex h-auto flex-col text-sm 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=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r 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]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l 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-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
className,
)}
{...props}
>
<div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
);
}
function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="drawer-header"
className={cn(
'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
className,
)}
{...props}
/>
);
}
function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="drawer-footer"
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...props}
/>
);
}
function DrawerTitle({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
return (
<DrawerPrimitive.Title
data-slot="drawer-title"
className={cn('text-foreground text-base font-medium', className)}
{...props}
/>
);
}
function DrawerDescription({
className,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
return (
<DrawerPrimitive.Description
data-slot="drawer-description"
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
}
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};

392
packages/ui/src/shadcn/dropdown-menu.tsx
View File

@@ -2,189 +2,271 @@
import * as React from 'react';
import {
CheckIcon,
ChevronRightIcon,
DotFilledIcon,
} from '@radix-ui/react-icons';
import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
import { CheckIcon, ChevronRightIcon } from 'lucide-react';
import { cn } from '../lib/utils';
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
const DropdownMenu = DropdownMenuPrimitive.Root;
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
function DropdownMenuContent({
align = 'start',
alignOffset = 0,
side = 'bottom',
sideOffset = 4,
className,
...props
}: MenuPrimitive.Popup.Props &
Pick<
MenuPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset'
>) {
return (
<MenuPrimitive.Portal>
<MenuPrimitive.Positioner
className="isolate z-50 outline-none"
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
>
<MenuPrimitive.Popup
data-slot="dropdown-menu-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
className,
)}
{...props}
/>
</MenuPrimitive.Positioner>
</MenuPrimitive.Portal>
);
}
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuSubTrigger: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean;
}
> = ({ className, inset, children, ...props }) => (
<DropdownMenuPrimitive.SubTrigger
className={cn(
'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
inset && 'pl-8',
className,
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
);
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>
> = ({ className, ...props }) => (
<DropdownMenuPrimitive.SubContent
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
className,
)}
{...props}
/>
);
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>
> = ({ className, sideOffset = 4, ...props }) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
sideOffset={sideOffset}
function DropdownMenuLabel({
className,
inset,
...props
}: MenuPrimitive.GroupLabel.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.GroupLabel
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
className,
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
);
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
);
}
const DropdownMenuItem: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
}
> = ({ className, inset, ...props }) => (
<DropdownMenuPrimitive.Item
className={cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
inset && 'pl-8',
className,
)}
{...props}
/>
);
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>
> = ({ className, children, checked, ...props }) => (
<DropdownMenuPrimitive.CheckboxItem
className={cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
);
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>
> = ({ className, children, ...props }) => (
<DropdownMenuPrimitive.RadioItem
className={cn(
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<DotFilledIcon className="h-4 w-4 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
);
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel: React.FC<
React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean;
}
> = ({ className, inset, ...props }) => (
<DropdownMenuPrimitive.Label
className={cn(
'px-2 py-1.5 text-sm font-semibold',
inset && 'pl-8',
className,
)}
{...props}
/>
);
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator: React.FC<
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
> = ({ className, ...props }) => (
<DropdownMenuPrimitive.Separator
className={cn('bg-muted -mx-1 my-1 h-px', className)}
{...props}
/>
);
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuShortcut = ({
function DropdownMenuItem({
className,
inset,
variant = 'default',
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
}: MenuPrimitive.Item.Props & {
inset?: boolean;
variant?: 'default' | 'destructive';
}) {
return (
<span
className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
<MenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
};
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
}
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: MenuPrimitive.SubmenuTrigger.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.SubmenuTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto" />
</MenuPrimitive.SubmenuTrigger>
);
}
function DropdownMenuSubContent({
align = 'start',
alignOffset = -3,
side = 'right',
sideOffset = 0,
className,
...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
return (
<DropdownMenuContent
data-slot="dropdown-menu-sub-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
className,
)}
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
{...props}
/>
);
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
inset,
...props
}: MenuPrimitive.CheckboxItem.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
checked={checked}
{...props}
>
<span
className="pointer-events-none absolute right-2 flex items-center justify-center"
data-slot="dropdown-menu-checkbox-item-indicator"
>
<MenuPrimitive.CheckboxItemIndicator>
<CheckIcon />
</MenuPrimitive.CheckboxItemIndicator>
</span>
{children}
</MenuPrimitive.CheckboxItem>
);
}
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
return (
<MenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
}
function DropdownMenuRadioItem({
className,
children,
inset,
...props
}: MenuPrimitive.RadioItem.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<span
className="pointer-events-none absolute right-2 flex items-center justify-center"
data-slot="dropdown-menu-radio-item-indicator"
>
<MenuPrimitive.RadioItemIndicator>
<CheckIcon />
</MenuPrimitive.RadioItemIndicator>
</span>
{children}
</MenuPrimitive.RadioItem>
);
}
function DropdownMenuSeparator({
className,
...props
}: MenuPrimitive.Separator.Props) {
return (
<MenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn('bg-border -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<'span'>) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props}
/>
);
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
DropdownMenuSubContent,
};

100
packages/ui/src/shadcn/empty.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { cn } from '#lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
function Empty({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="empty"
className={cn(
'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
className,
)}
{...props}
/>
);
}
function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="empty-header"
className={cn('flex max-w-sm flex-col items-center gap-2', className)}
{...props}
/>
);
}
const emptyMediaVariants = cva(
'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
{
variants: {
variant: {
default: 'bg-transparent',
icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
},
},
defaultVariants: {
variant: 'default',
},
},
);
function EmptyMedia({
className,
variant = 'default',
...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
return (
<div
data-slot="empty-icon"
data-variant={variant}
className={cn(emptyMediaVariants({ variant, className }))}
{...props}
/>
);
}
function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="empty-title"
className={cn('text-sm font-medium tracking-tight', className)}
{...props}
/>
);
}
function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
return (
<div
data-slot="empty-description"
className={cn(
'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
className,
)}
{...props}
/>
);
}
function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="empty-content"
className={cn(
'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
className,
)}
{...props}
/>
);
}
export {
Empty,
EmptyHeader,
EmptyTitle,
EmptyDescription,
EmptyContent,
EmptyMedia,
};

52
packages/ui/src/shadcn/field.tsx
View File

@@ -2,9 +2,9 @@
import { useMemo } from 'react';
import { cn } from '#lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../lib/utils/cn';
import { Label } from './label';
import { Separator } from './separator';
@@ -13,8 +13,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
<fieldset
data-slot="field-set"
className={cn(
'flex flex-col gap-6',
'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
className,
)}
{...props}
@@ -32,9 +31,7 @@ function FieldLegend({
data-slot="field-legend"
data-variant={variant}
className={cn(
'mb-3 font-medium',
'data-[variant=legend]:text-base',
'data-[variant=label]:text-sm',
'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
className,
)}
{...props}
@@ -47,7 +44,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="field-group"
className={cn(
'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
className,
)}
{...props}
@@ -56,21 +53,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
}
const fieldVariants = cva(
'group/field data-[invalid=true]:text-destructive flex w-full gap-3',
'group/field data-[invalid=true]:text-destructive flex w-full gap-2',
{
variants: {
orientation: {
vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
horizontal: [
'flex-row items-center',
'[&>[data-slot=field-label]]:flex-auto',
'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
],
responsive: [
'flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto',
'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
],
vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
horizontal:
'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
responsive:
'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
},
},
defaultVariants: {
@@ -100,7 +91,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="field-content"
className={cn(
'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
'group/field-content flex flex-1 flex-col gap-0.5 leading-snug',
className,
)}
{...props}
@@ -116,9 +107,8 @@ function FieldLabel({
<Label
data-slot="field-label"
className={cn(
'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
'group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
className,
)}
{...props}
@@ -144,8 +134,8 @@ function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
<p
data-slot="field-description"
className={cn(
'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
'text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
'last:mt-0 nth-last-2:-mt-1',
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
className,
)}
@@ -197,17 +187,21 @@ function FieldError({
return children;
}
if (!errors) {
if (!errors?.length) {
return null;
}
if (errors?.length === 1 && errors[0]?.message) {
return errors[0].message;
const uniqueErrors = [
...new Map(errors.map((error) => [error?.message, error])).values(),
];
if (uniqueErrors?.length == 1) {
return uniqueErrors[0]?.message;
}
return (
<ul className="ml-4 flex list-disc flex-col gap-1">
{errors.map(
{uniqueErrors.map(
(error, index) =>
error?.message && <li key={index}>{error.message}</li>,
)}

55
packages/ui/src/shadcn/form.tsx
View File

@@ -2,12 +2,11 @@
import * as React from 'react';
import { Label as LabelPrimitive } from 'radix-ui';
import { Slot } from 'radix-ui';
import { cn } from '#utils';
import { useRender } from '@base-ui/react/use-render';
import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
import { Controller, FormProvider, useFormContext } from 'react-hook-form';
import { cn } from '../lib/utils';
import { Trans } from '../makerkit/trans';
import { Label } from './label';
@@ -41,7 +40,6 @@ const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
@@ -82,9 +80,10 @@ const FormItem: React.FC<React.ComponentPropsWithRef<'div'>> = ({
};
FormItem.displayName = 'FormItem';
const FormLabel: React.FC<
React.ComponentPropsWithRef<typeof LabelPrimitive.Root>
> = ({ className, ...props }) => {
const FormLabel: React.FC<React.ComponentPropsWithRef<typeof Label>> = ({
className,
...props
}) => {
const { error, formItemId } = useFormField();
return (
@@ -98,23 +97,29 @@ const FormLabel: React.FC<
FormLabel.displayName = 'FormLabel';
const FormControl: React.FC<
React.ComponentPropsWithoutRef<typeof Slot.Root>
React.PropsWithChildren & {
className?: string;
render?: React.ReactElement;
}
> = ({ ...props }) => {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot.Root
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
);
return useRender({
defaultTagName: 'div',
render: props.render,
props: {
...props,
id: formItemId,
'aria-labelledby': formItemId,
'aria-describedby': !error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`,
'aria-invalid': !!error,
className: cn(props.className),
children: props.children,
},
});
};
FormControl.displayName = 'FormControl';
@@ -134,11 +139,9 @@ const FormDescription: React.FC<React.ComponentPropsWithRef<'p'>> = ({
};
FormDescription.displayName = 'FormDescription';
const FormMessage: React.FC<React.ComponentPropsWithRef<'p'>> = ({
className,
children,
...props
}) => {
const FormMessage: React.FC<
React.ComponentPropsWithRef<'p'> & { params?: Record<string, unknown> }
> = ({ className, children, params = {}, ...props }) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
@@ -153,7 +156,7 @@ const FormMessage: React.FC<React.ComponentPropsWithRef<'p'>> = ({
{...props}
>
{typeof body === 'string' ? (
<Trans i18nKey={body} defaults={body} />
<Trans i18nKey={body} defaults={body} values={params} />
) : (
body
)}

50
packages/ui/src/shadcn/hover-card.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import { cn } from '#lib/utils';
import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
}
function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
return (
<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
);
}
function HoverCardContent({
className,
side = 'bottom',
sideOffset = 4,
align = 'center',
alignOffset = 4,
...props
}: PreviewCardPrimitive.Popup.Props &
Pick<
PreviewCardPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset'
>) {
return (
<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
<PreviewCardPrimitive.Positioner
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
className="isolate z-50"
>
<PreviewCardPrimitive.Popup
data-slot="hover-card-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
className,
)}
{...props}
/>
</PreviewCardPrimitive.Positioner>
</PreviewCardPrimitive.Portal>
);
}
export { HoverCard, HoverCardTrigger, HoverCardContent };

48
packages/ui/src/shadcn/input-group.tsx
View File

@@ -2,12 +2,12 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import { type VariantProps, cva } from 'class-variance-authority';
import { cn } from '../lib/utils/cn';
import { Button } from '../shadcn/button';
import { Input } from '../shadcn/input';
import { Textarea } from '../shadcn/textarea';
import { Button } from './button';
import { Input } from './input';
import { Textarea } from './textarea';
function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
@@ -15,21 +15,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
data-slot="input-group"
role="group"
className={cn(
'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
'h-9 has-[>textarea]:h-auto',
// Variants based on alignment.
'has-[>[data-align=inline-start]]:[&>input]:pl-2',
'has-[>[data-align=inline-end]]:[&>input]:pr-2',
'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
// Focus state.
'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
// Error state.
'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
'group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
className,
)}
{...props}
@@ -43,13 +29,13 @@ const inputGroupAddonVariants = cva(
variants: {
align: {
'inline-start':
'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
'inline-end':
'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
'block-start':
'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
'block-end':
'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
},
},
defaultVariants: {
@@ -85,10 +71,10 @@ const inputGroupButtonVariants = cva(
{
variants: {
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
sm: '',
'icon-xs':
'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
},
},
@@ -104,8 +90,10 @@ function InputGroupButton({
variant = 'ghost',
size = 'xs',
...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
VariantProps<typeof inputGroupButtonVariants>) {
}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
VariantProps<typeof inputGroupButtonVariants> & {
type?: 'button' | 'submit' | 'reset';
}) {
return (
<Button
type={type}
@@ -137,7 +125,7 @@ function InputGroupInput({
<Input
data-slot="input-group-control"
className={cn(
'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
className,
)}
{...props}
@@ -153,7 +141,7 @@ function InputGroupTextarea({
<Textarea
data-slot="input-group-control"
className={cn(
'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
className,
)}
{...props}

96
packages/ui/src/shadcn/input-otp.tsx
View File

@@ -2,51 +2,60 @@
import * as React from 'react';
import { DashIcon } from '@radix-ui/react-icons';
import { cn } from '#lib/utils';
import { OTPInput, OTPInputContext } from 'input-otp';
import { MinusIcon } from 'lucide-react';
import { cn } from '../lib/utils';
const InputOTP: React.FC<React.ComponentPropsWithoutRef<typeof OTPInput>> = ({
function InputOTP({
className,
containerClassName,
...props
}) => (
<OTPInput
containerClassName={cn(
'flex items-center gap-2 has-disabled:opacity-50',
containerClassName,
)}
className={cn('disabled:cursor-not-allowed', className)}
{...props}
/>
);
InputOTP.displayName = 'InputOTP';
}: React.ComponentProps<typeof OTPInput> & {
containerClassName?: string;
}) {
return (
<OTPInput
data-slot="input-otp"
containerClassName={cn(
'cn-input-otp flex items-center has-disabled:opacity-50',
containerClassName,
)}
spellCheck={false}
className={cn('disabled:cursor-not-allowed', className)}
{...props}
/>
);
}
const InputOTPGroup: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="input-otp-group"
className={cn(
'has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-lg has-aria-invalid:ring-3',
className,
)}
{...props}
/>
);
}
function InputOTPSlot({
index,
className,
...props
}) => <div className={cn('flex items-center', className)} {...props} />;
InputOTPGroup.displayName = 'InputOTPGroup';
const InputOTPSlot: React.FC<
React.ComponentPropsWithRef<'div'> & { index: number }
> = ({ index, className, ...props }) => {
}: React.ComponentProps<'div'> & {
index: number;
}) {
const inputOTPContext = React.useContext(OTPInputContext);
const slot = inputOTPContext.slots[index];
if (!slot) {
return null;
}
const { char, isActive, hasFakeCaret } = slot;
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
return (
<div
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
'border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'ring-ring z-10 ring-1',
'border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3',
className,
)}
{...props}
@@ -59,16 +68,19 @@ const InputOTPSlot: React.FC<
)}
</div>
);
};
InputOTPSlot.displayName = 'InputOTPSlot';
}
const InputOTPSeparator: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
...props
}) => (
<div role="separator" {...props}>
<DashIcon />
</div>
);
InputOTPSeparator.displayName = 'InputOTPSeparator';
function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="input-otp-separator"
className="flex items-center [&_svg:not([class*='size-'])]:size-4"
role="separator"
{...props}
>
<MinusIcon />
</div>
);
}
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

20
packages/ui/src/shadcn/input.tsx
View File

@@ -1,26 +1,20 @@
import * as React from 'react';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
import { Input as InputPrimitive } from '@base-ui/react/input';
export type InputProps = React.ComponentPropsWithRef<'input'>;
const Input: React.FC<InputProps> = ({
className,
type = 'text',
...props
}) => {
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
return (
<input
<InputPrimitive
type={type}
data-slot="input"
className={cn(
'border-input file:text-foreground hover:border-ring/50 placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-2xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
className,
)}
{...props}
/>
);
};
Input.displayName = 'Input';
}
export { Input };

67
packages/ui/src/shadcn/item.tsx
View File

@@ -1,9 +1,10 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import { mergeProps } from '@base-ui/react/merge-props';
import { useRender } from '@base-ui/react/use-render';
import { type VariantProps, cva } from 'class-variance-authority';
import { Slot } from 'radix-ui';
import { cn } from '../lib/utils';
import { Separator } from './separator';
function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
@@ -11,7 +12,10 @@ function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
<div
role="list"
data-slot="item-group"
className={cn('group/item-group flex flex-col', className)}
className={cn(
'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
className,
)}
{...props}
/>
);
@@ -25,24 +29,25 @@ function ItemSeparator({
<Separator
data-slot="item-separator"
orientation="horizontal"
className={cn('my-0', className)}
className={cn('my-2', className)}
{...props}
/>
);
}
const itemVariants = cva(
'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
'group/item focus-visible:border-ring focus-visible:ring-ring/50 [a]:hover:bg-muted flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
{
variants: {
variant: {
default: 'bg-transparent',
default: 'border-transparent',
outline: 'border-border',
muted: 'bg-muted/50',
muted: 'bg-muted/50 border-transparent',
},
size: {
default: 'gap-4 p-4',
sm: 'gap-2.5 px-4 py-3',
default: 'gap-2.5 px-3 py-2.5',
sm: 'gap-2.5 px-3 py-2.5',
xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
},
},
defaultVariants: {
@@ -56,32 +61,35 @@ function Item({
className,
variant = 'default',
size = 'default',
asChild = false,
render,
...props
}: React.ComponentProps<'div'> &
VariantProps<typeof itemVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot.Root : 'div';
return (
<Comp
data-slot="item"
data-variant={variant}
data-size={size}
className={cn(itemVariants({ variant, size, className }))}
{...props}
/>
);
}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
return useRender({
defaultTagName: 'div',
props: mergeProps<'div'>(
{
className: cn(itemVariants({ variant, size, className })),
},
props,
),
render,
state: {
slot: 'item',
variant,
size,
},
});
}
const itemMediaVariants = cva(
'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
{
variants: {
variant: {
default: 'bg-transparent',
icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
icon: "[&_svg:not([class*='size-'])]:size-4",
image:
'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
},
},
defaultVariants: {
@@ -110,7 +118,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="item-content"
className={cn(
'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
className,
)}
{...props}
@@ -123,7 +131,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
<div
data-slot="item-title"
className={cn(
'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
className,
)}
{...props}
@@ -136,8 +144,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
<p
data-slot="item-description"
className={cn(
'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
className,
)}
{...props}

6
packages/ui/src/shadcn/kbd.tsx
View File

@@ -1,13 +1,11 @@
import { cn } from '../lib/utils/cn';
import { cn } from '#lib/utils';
function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
return (
<kbd
data-slot="kbd"
className={cn(
'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
"[&_svg:not([class*='size-'])]:size-3",
'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
className,
)}
{...props}

28
packages/ui/src/shadcn/label.tsx
View File

@@ -2,21 +2,19 @@
import * as React from 'react';
import { type VariantProps, cva } from 'class-variance-authority';
import { Label as LabelPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { cn } from '../lib/utils';
const labelVariants = cva(
'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
);
const Label: React.FC<
React.ComponentPropsWithRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
> = ({ className, ...props }) => (
<LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
);
Label.displayName = LabelPrimitive.Root.displayName;
function Label({ className, ...props }: React.ComponentProps<'label'>) {
return (
<label
data-slot="label"
className={cn(
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className,
)}
{...props}
/>
);
}
export { Label };

254
packages/ui/src/shadcn/menu-bar.tsx Normal file
View File

@@ -0,0 +1,254 @@
'use client';
import * as React from 'react';
import { cn } from '#utils';
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
import { CheckIcon } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from './dropdown-menu';
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
return (
<MenubarPrimitive
data-slot="menubar"
className={cn('cn-menubar flex items-center', className)}
{...props}
/>
);
}
function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
return <DropdownMenu data-slot="menubar-menu" {...props} />;
}
function MenubarGroup({
...props
}: React.ComponentProps<typeof DropdownMenuGroup>) {
return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
}
function MenubarPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPortal>) {
return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
}
function MenubarTrigger({
className,
...props
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
return (
<DropdownMenuTrigger
data-slot="menubar-trigger"
className={cn(
'cn-menubar-trigger flex items-center outline-hidden select-none',
className,
)}
{...props}
/>
);
}
function MenubarContent({
className,
align = 'start',
alignOffset = -4,
sideOffset = 8,
...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
return (
<DropdownMenuContent
data-slot="menubar-content"
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn('cn-menubar-content cn-menu-target', className)}
{...props}
/>
);
}
function MenubarItem({
className,
inset,
variant = 'default',
...props
}: React.ComponentProps<typeof DropdownMenuItem>) {
return (
<DropdownMenuItem
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn('cn-menubar-item group/menubar-item', className)}
{...props}
/>
);
}
function MenubarCheckboxItem({
className,
children,
checked,
...props
}: MenuPrimitive.CheckboxItem.Props) {
return (
<MenuPrimitive.CheckboxItem
data-slot="menubar-checkbox-item"
className={cn(
'cn-menubar-checkbox-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
className,
)}
checked={checked}
{...props}
>
<span className="cn-menubar-checkbox-item-indicator pointer-events-none absolute flex items-center justify-center">
<MenuPrimitive.CheckboxItemIndicator>
<CheckIcon />
</MenuPrimitive.CheckboxItemIndicator>
</span>
{children}
</MenuPrimitive.CheckboxItem>
);
}
function MenubarRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
}
function MenubarRadioItem({
className,
children,
...props
}: MenuPrimitive.RadioItem.Props) {
return (
<MenuPrimitive.RadioItem
data-slot="menubar-radio-item"
className={cn(
'cn-menubar-radio-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
className,
)}
{...props}
>
<span className="cn-menubar-radio-item-indicator pointer-events-none absolute flex items-center justify-center">
<MenuPrimitive.RadioItemIndicator>
<CheckIcon />
</MenuPrimitive.RadioItemIndicator>
</span>
{children}
</MenuPrimitive.RadioItem>
);
}
function MenubarLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuLabel>) {
return (
<DropdownMenuLabel
data-slot="menubar-label"
data-inset={inset}
className={cn('cn-menubar-label', className)}
{...props}
/>
);
}
function MenubarSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
return (
<DropdownMenuSeparator
data-slot="menubar-separator"
className={cn('cn-menubar-separator -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function MenubarShortcut({
className,
...props
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
return (
<DropdownMenuShortcut
data-slot="menubar-shortcut"
className={cn('cn-menubar-shortcut ml-auto', className)}
{...props}
/>
);
}
function MenubarSub({
...props
}: React.ComponentProps<typeof DropdownMenuSub>) {
return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
}
function MenubarSubTrigger({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
inset?: boolean;
}) {
return (
<DropdownMenuSubTrigger
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn('cn-menubar-sub-trigger', className)}
{...props}
/>
);
}
function MenubarSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
return (
<DropdownMenuSubContent
data-slot="menubar-sub-content"
className={cn('cn-menubar-sub-content', className)}
{...props}
/>
);
}
export {
Menubar,
MenubarPortal,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem,
MenubarShortcut,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
};

285
packages/ui/src/shadcn/menubar.tsx Normal file
View File

@@ -0,0 +1,285 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
import { CheckIcon } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuRadioGroup,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from './dropdown-menu';
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
return (
<MenubarPrimitive
data-slot="menubar"
className={cn(
'bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]',
className,
)}
{...props}
/>
);
}
function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
return <DropdownMenu data-slot="menubar-menu" {...props} />;
}
function MenubarGroup({
...props
}: React.ComponentProps<typeof DropdownMenuGroup>) {
return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
}
function MenubarPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPortal>) {
return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
}
function MenubarTrigger({
className,
...props
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
return (
<DropdownMenuTrigger
data-slot="menubar-trigger"
className={cn(
'hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none',
className,
)}
{...props}
/>
);
}
function MenubarContent({
className,
align = 'start',
alignOffset = -4,
sideOffset = 8,
...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
return (
<DropdownMenuContent
data-slot="menubar-content"
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100',
className,
)}
{...props}
/>
);
}
function MenubarItem({
className,
inset,
variant = 'default',
...props
}: React.ComponentProps<typeof DropdownMenuItem>) {
return (
<DropdownMenuItem
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn(
"group/menubar-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive! gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
}
function MenubarCheckboxItem({
className,
children,
checked,
inset,
...props
}: MenuPrimitive.CheckboxItem.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.CheckboxItem
data-slot="menubar-checkbox-item"
data-inset={inset}
className={cn(
'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0',
className,
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenuPrimitive.CheckboxItemIndicator>
<CheckIcon />
</MenuPrimitive.CheckboxItemIndicator>
</span>
{children}
</MenuPrimitive.CheckboxItem>
);
}
function MenubarRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
}
function MenubarRadioItem({
className,
children,
inset,
...props
}: MenuPrimitive.RadioItem.Props & {
inset?: boolean;
}) {
return (
<MenuPrimitive.RadioItem
data-slot="menubar-radio-item"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenuPrimitive.RadioItemIndicator>
<CheckIcon />
</MenuPrimitive.RadioItemIndicator>
</span>
{children}
</MenuPrimitive.RadioItem>
);
}
function MenubarLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuLabel> & {
inset?: boolean;
}) {
return (
<DropdownMenuLabel
data-slot="menubar-label"
data-inset={inset}
className={cn(
'px-1.5 py-1 text-sm font-medium data-inset:pl-7',
className,
)}
{...props}
/>
);
}
function MenubarSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
return (
<DropdownMenuSeparator
data-slot="menubar-separator"
className={cn('bg-border -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function MenubarShortcut({
className,
...props
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
return (
<DropdownMenuShortcut
data-slot="menubar-shortcut"
className={cn(
'text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest',
className,
)}
{...props}
/>
);
}
function MenubarSub({
...props
}: React.ComponentProps<typeof DropdownMenuSub>) {
return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
}
function MenubarSubTrigger({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
inset?: boolean;
}) {
return (
<DropdownMenuSubTrigger
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
}
function MenubarSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
return (
<DropdownMenuSubContent
data-slot="menubar-sub-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100',
className,
)}
{...props}
/>
);
}
export {
Menubar,
MenubarPortal,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem,
MenubarShortcut,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
};

56
packages/ui/src/shadcn/native-select.tsx Normal file
View File

@@ -0,0 +1,56 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import { ChevronDownIcon } from 'lucide-react';
type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
size?: 'sm' | 'default';
};
function NativeSelect({
className,
size = 'default',
...props
}: NativeSelectProps) {
return (
<div
className={cn(
'group/native-select relative w-fit has-[select:disabled]:opacity-50',
className,
)}
data-slot="native-select-wrapper"
data-size={size}
>
<select
data-slot="native-select"
data-size={size}
className="border-input selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
{...props}
/>
<ChevronDownIcon
className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
aria-hidden="true"
data-slot="native-select-icon"
/>
</div>
);
}
function NativeSelectOption({ ...props }: React.ComponentProps<'option'>) {
return <option data-slot="native-select-option" {...props} />;
}
function NativeSelectOptGroup({
className,
...props
}: React.ComponentProps<'optgroup'>) {
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
{...props}
/>
);
}
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

259
packages/ui/src/shadcn/navigation-menu.tsx
View File

@@ -1,119 +1,170 @@
'use client';
import * as React from 'react';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import { cn } from '#lib/utils';
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
import { cva } from 'class-variance-authority';
import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
import { ChevronDownIcon } from 'lucide-react';
import { cn } from '../lib/utils';
const NavigationMenu: React.FC<
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Root>
> = ({ className, children, ...props }) => (
<NavigationMenuPrimitive.Root
className={cn(
'relative z-10 flex max-w-max flex-1 items-center justify-center',
className,
)}
{...props}
>
{children}
<NavigationMenuViewport />
</NavigationMenuPrimitive.Root>
);
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
const NavigationMenuList: React.FC<
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>
> = ({ className, ...props }) => (
<NavigationMenuPrimitive.List
className={cn(
'group flex flex-1 list-none items-center justify-center space-x-1',
className,
)}
{...props}
/>
);
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item;
const navigationMenuTriggerStyle = cva(
'group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-active:bg-accent/50 data-[state=open]:bg-accent/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-hidden disabled:pointer-events-none disabled:opacity-50',
);
const NavigationMenuTrigger: React.FC<
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Trigger>
> = ({ className, children, ...props }) => (
<NavigationMenuPrimitive.Trigger
className={cn(navigationMenuTriggerStyle(), 'group', className)}
{...props}
>
{children}{' '}
<ChevronDownIcon
className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger>
);
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
const NavigationMenuContent: React.FC<
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
> = ({ className, ...props }) => (
<NavigationMenuPrimitive.Content
className={cn(
'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto',
className,
)}
{...props}
/>
);
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
const NavigationMenuLink = NavigationMenuPrimitive.Link;
const NavigationMenuViewport: React.FC<
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
> = ({ className, ...props }) => (
<div className={cn('absolute top-full left-0 flex justify-center')}>
<NavigationMenuPrimitive.Viewport
function NavigationMenu({
align = 'start',
className,
children,
...props
}: NavigationMenuPrimitive.Root.Props &
Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
return (
<NavigationMenuPrimitive.Root
data-slot="navigation-menu"
className={cn(
'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-xs md:w-[var(--radix-navigation-menu-viewport-width)]',
'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
className,
)}
{...props}
>
{children}
<NavigationMenuPositioner align={align} />
</NavigationMenuPrimitive.Root>
);
}
function NavigationMenuList({
className,
...props
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
return (
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn(
'group flex flex-1 list-none items-center justify-center gap-0',
className,
)}
{...props}
/>
</div>
);
NavigationMenuViewport.displayName =
NavigationMenuPrimitive.Viewport.displayName;
);
}
const NavigationMenuIndicator: React.FC<
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Indicator>
> = ({ className, ...props }) => (
<NavigationMenuPrimitive.Indicator
className={cn(
'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
className,
)}
{...props}
>
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
</NavigationMenuPrimitive.Indicator>
function NavigationMenuItem({
className,
...props
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
return (
<NavigationMenuPrimitive.Item
data-slot="navigation-menu-item"
className={cn('relative', className)}
{...props}
/>
);
}
const navigationMenuTriggerStyle = cva(
'group/navigation-menu-trigger bg-background hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50',
);
NavigationMenuIndicator.displayName =
NavigationMenuPrimitive.Indicator.displayName;
function NavigationMenuTrigger({
className,
children,
...props
}: NavigationMenuPrimitive.Trigger.Props) {
return (
<NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger"
className={cn(navigationMenuTriggerStyle(), 'group', className)}
{...props}
>
{children}{' '}
<ChevronDownIcon
className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
aria-hidden="true"
/>
</NavigationMenuPrimitive.Trigger>
);
}
function NavigationMenuContent({
className,
...props
}: NavigationMenuPrimitive.Content.Props) {
return (
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
className,
)}
{...props}
/>
);
}
function NavigationMenuPositioner({
className,
side = 'bottom',
sideOffset = 8,
align = 'start',
alignOffset = 0,
...props
}: NavigationMenuPrimitive.Positioner.Props) {
return (
<NavigationMenuPrimitive.Portal>
<NavigationMenuPrimitive.Positioner
side={side}
sideOffset={sideOffset}
align={align}
alignOffset={alignOffset}
className={cn(
'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
className,
)}
{...props}
>
<NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
</NavigationMenuPrimitive.Popup>
</NavigationMenuPrimitive.Positioner>
</NavigationMenuPrimitive.Portal>
);
}
function NavigationMenuLink({
className,
...props
}: NavigationMenuPrimitive.Link.Props) {
return (
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn(
"hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
/>
);
}
function NavigationMenuIndicator({
className,
...props
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
return (
<NavigationMenuPrimitive.Icon
data-slot="navigation-menu-indicator"
className={cn(
'data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
className,
)}
{...props}
>
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
</NavigationMenuPrimitive.Icon>
);
}
export {
navigationMenuTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
NavigationMenuPositioner,
};

134
packages/ui/src/shadcn/pagination.tsx Normal file
View File

@@ -0,0 +1,134 @@
import * as React from 'react';
import { cn } from '#lib/utils';
import {
ChevronLeftIcon,
ChevronRightIcon,
MoreHorizontalIcon,
} from 'lucide-react';
import { Button } from './button';
function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
return (
<nav
role="navigation"
aria-label="pagination"
data-slot="pagination"
className={cn('mx-auto flex w-full justify-center', className)}
{...props}
/>
);
}
function PaginationContent({
className,
...props
}: React.ComponentProps<'ul'>) {
return (
<ul
data-slot="pagination-content"
className={cn('flex items-center gap-0.5', className)}
{...props}
/>
);
}
function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
return <li data-slot="pagination-item" {...props} />;
}
type PaginationLinkProps = {
isActive?: boolean;
} & Pick<React.ComponentProps<typeof Button>, 'size'> &
React.ComponentProps<'a'>;
function PaginationLink({
className,
isActive,
size = 'icon',
...props
}: PaginationLinkProps) {
return (
<Button
variant={isActive ? 'outline' : 'ghost'}
size={size}
className={cn(className)}
nativeButton={false}
render={
<a
aria-current={isActive ? 'page' : undefined}
data-slot="pagination-link"
data-active={isActive}
{...props}
/>
}
/>
);
}
function PaginationPrevious({
className,
text = 'Previous',
...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
return (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn('pl-1.5!', className)}
{...props}
>
<ChevronLeftIcon data-icon="inline-start" />
<span className="hidden sm:block">{text}</span>
</PaginationLink>
);
}
function PaginationNext({
className,
text = 'Next',
...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
return (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn('pr-1.5!', className)}
{...props}
>
<span className="hidden sm:block">{text}</span>
<ChevronRightIcon data-icon="inline-end" />
</PaginationLink>
);
}
function PaginationEllipsis({
className,
...props
}: React.ComponentProps<'span'>) {
return (
<span
aria-hidden
data-slot="pagination-ellipsis"
className={cn(
"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<MoreHorizontalIcon />
<span className="sr-only">More pages</span>
</span>
);
}
export {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
};

99
packages/ui/src/shadcn/popover.tsx
View File

@@ -2,32 +2,89 @@
import * as React from 'react';
import { Popover as PopoverPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
import { cn } from '../lib/utils';
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
}
const Popover = PopoverPrimitive.Root;
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
}
const PopoverTrigger = PopoverPrimitive.Trigger;
function PopoverContent({
className,
align = 'center',
alignOffset = 0,
side = 'bottom',
sideOffset = 4,
...props
}: PopoverPrimitive.Popup.Props &
Pick<
PopoverPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset'
>) {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Positioner
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
className="isolate z-50"
>
<PopoverPrimitive.Popup
data-slot="popover-content"
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
className,
)}
{...props}
/>
</PopoverPrimitive.Positioner>
</PopoverPrimitive.Portal>
);
}
const PopoverAnchor = PopoverPrimitive.Anchor;
const PopoverContent: React.FC<
React.ComponentProps<typeof PopoverPrimitive.Content>
> = ({ className, align = 'center', sideOffset = 4, ...props }) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
align={align}
sideOffset={sideOffset}
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
className,
)}
function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="popover-header"
className={cn('flex flex-col gap-0.5 text-sm', className)}
{...props}
/>
</PopoverPrimitive.Portal>
);
);
}
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
return (
<PopoverPrimitive.Title
data-slot="popover-title"
className={cn('font-medium', className)}
{...props}
/>
);
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
function PopoverDescription({
className,
...props
}: PopoverPrimitive.Description.Props) {
return (
<PopoverPrimitive.Description
data-slot="popover-description"
className={cn('text-muted-foreground', className)}
{...props}
/>
);
}
export {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
};

96
packages/ui/src/shadcn/progress.tsx
View File

@@ -1,28 +1,82 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
import { Progress as ProgressPrimitive } from 'radix-ui';
function Progress({
className,
children,
value,
...props
}: ProgressPrimitive.Root.Props) {
return (
<ProgressPrimitive.Root
value={value}
data-slot="progress"
className={cn('flex flex-wrap gap-3', className)}
{...props}
>
{children}
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
</ProgressPrimitive.Root>
);
}
import { cn } from '../lib/utils';
const Progress: React.FC<
React.ComponentProps<typeof ProgressPrimitive.Root>
> = ({ className, value, ...props }) => (
<ProgressPrimitive.Root
className={cn(
'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
className="bg-primary h-full w-full flex-1 transition-all"
style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
return (
<ProgressPrimitive.Track
className={cn(
'bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full',
className,
)}
data-slot="progress-track"
{...props}
/>
</ProgressPrimitive.Root>
);
);
}
Progress.displayName = ProgressPrimitive.Root.displayName;
function ProgressIndicator({
className,
...props
}: ProgressPrimitive.Indicator.Props) {
return (
<ProgressPrimitive.Indicator
data-slot="progress-indicator"
className={cn('bg-primary h-full transition-all', className)}
{...props}
/>
);
}
export { Progress };
function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
return (
<ProgressPrimitive.Label
className={cn('text-sm font-medium', className)}
data-slot="progress-label"
{...props}
/>
);
}
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
return (
<ProgressPrimitive.Value
className={cn(
'text-muted-foreground ml-auto text-sm tabular-nums',
className,
)}
data-slot="progress-value"
{...props}
/>
);
}
export {
Progress,
ProgressTrack,
ProgressIndicator,
ProgressLabel,
ProgressValue,
};

75
packages/ui/src/shadcn/radio-group.tsx
View File

@@ -1,67 +1,66 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Radio as RadioPrimitive } from '@base-ui/react/radio';
import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
import { CheckIcon } from '@radix-ui/react-icons';
import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
import { cn } from '../lib/utils';
const RadioGroup: React.FC<
React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>
> = ({ className, ...props }) => {
function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
return (
<RadioGroupPrimitive.Root
className={cn('grid gap-2', className)}
<RadioGroupPrimitive
data-slot="radio-group"
className={cn('grid w-full gap-2', className)}
{...props}
/>
);
};
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
}
const RadioGroupItem: React.FC<
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
> = ({ className, ...props }) => {
function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
return (
<RadioGroupPrimitive.Item
<RadioPrimitive.Root
data-slot="radio-group-item"
className={cn(
'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
'group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
className,
)}
{...props}
>
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
<CheckIcon className="fill-primary animate-in fade-in slide-in-from-left-4 h-3.5 w-3.5" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
<RadioPrimitive.Indicator
data-slot="radio-group-indicator"
className="flex size-4 items-center justify-center"
>
<span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
</RadioPrimitive.Indicator>
</RadioPrimitive.Root>
);
};
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
}
const RadioGroupItemLabel = (
props: React.PropsWithChildren<{
className?: string;
selected?: boolean;
}>,
) => {
function RadioGroupItemLabel({
selected,
className,
children,
...props
}: React.PropsWithChildren<{
selected?: boolean;
}> &
React.LabelHTMLAttributes<unknown>) {
return (
<label
data-selected={props.selected}
data-selected={selected}
className={cn(
props.className,
className,
'flex cursor-pointer rounded-md' +
' border-input items-center space-x-4 border' +
'focus-within:border-primary active:bg-muted p-2.5 text-sm transition-all',
' focus-within:border-primary active:bg-muted p-2.5 text-sm transition-all',
{
[`bg-muted/70`]: props.selected,
[`hover:bg-muted/50`]: !props.selected,
[`bg-muted/70`]: selected,
[`hover:bg-muted/50`]: !selected,
},
)}
{...props}
>
{props.children}
{children}
</label>
);
};
RadioGroupItemLabel.displayName = 'RadioGroupItemLabel';
}
export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };

49
packages/ui/src/shadcn/resizable.tsx Normal file
View File

@@ -0,0 +1,49 @@
'use client';
import { cn } from '#lib/utils';
import * as ResizablePrimitive from 'react-resizable-panels';
function ResizablePanelGroup({
className,
...props
}: ResizablePrimitive.GroupProps) {
return (
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn(
'flex h-full w-full aria-[orientation=vertical]:flex-col',
className,
)}
{...props}
/>
);
}
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
}
function ResizableHandle({
withHandle,
className,
...props
}: ResizablePrimitive.SeparatorProps & {
withHandle?: boolean;
}) {
return (
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
'bg-border ring-offset-background focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
className,
)}
{...props}
>
{withHandle && (
<div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
)}
</ResizablePrimitive.Separator>
);
}
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

84
packages/ui/src/shadcn/scroll-area.tsx
View File

@@ -2,44 +2,54 @@
import * as React from 'react';
import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
import { cn } from '../lib/utils';
function ScrollArea({
className,
children,
...props
}: ScrollAreaPrimitive.Root.Props) {
return (
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn('relative', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
);
}
const ScrollArea: React.FC<
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
> = ({ className, children, ...props }) => (
<ScrollAreaPrimitive.Root
className={cn('relative overflow-hidden', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
);
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar: React.FC<
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
> = ({ className, orientation = 'vertical', ...props }) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
orientation={orientation}
className={cn(
'flex touch-none transition-colors select-none',
orientation === 'vertical' &&
'h-full w-2.5 border-l border-l-transparent p-[1px]',
orientation === 'horizontal' &&
'h-2.5 border-t border-t-transparent p-[1px]',
className,
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
);
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
function ScrollBar({
className,
orientation = 'vertical',
...props
}: ScrollAreaPrimitive.Scrollbar.Props) {
return (
<ScrollAreaPrimitive.Scrollbar
data-slot="scroll-area-scrollbar"
data-orientation={orientation}
orientation={orientation}
className={cn(
'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
className,
)}
{...props}
>
<ScrollAreaPrimitive.Thumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full"
/>
</ScrollAreaPrimitive.Scrollbar>
);
}
export { ScrollArea, ScrollBar };

303
packages/ui/src/shadcn/select.tsx
View File

@@ -2,150 +2,201 @@
import * as React from 'react';
import {
CaretSortIcon,
CheckIcon,
ChevronDownIcon,
ChevronUpIcon,
} from '@radix-ui/react-icons';
import { Select as SelectPrimitive } from 'radix-ui';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
import { Select as SelectPrimitive } from '@base-ui/react/select';
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
return (
<SelectPrimitive.Group
data-slot="select-group"
className={cn('scroll-my-1 p-1', className)}
{...props}
/>
);
}
const SelectValue = SelectPrimitive.Value;
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
return (
<SelectPrimitive.Value
data-slot="select-value"
className={cn('flex flex-1 text-left', className)}
{...props}
/>
);
}
const SelectTrigger: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.Trigger>
> = ({ className, children, ...props }) => (
<SelectPrimitive.Trigger
className={cn(
'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className,
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<CaretSortIcon className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
);
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>
> = ({ className, ...props }) => (
<SelectPrimitive.ScrollUpButton
className={cn(
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
<ChevronUpIcon />
</SelectPrimitive.ScrollUpButton>
);
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollDownButton>
> = ({ className, ...props }) => (
<SelectPrimitive.ScrollDownButton
className={cn(
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
<ChevronDownIcon />
</SelectPrimitive.ScrollDownButton>
);
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent: React.FC<
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
> = ({ className, children, position = 'popper', ...props }) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
function SelectTrigger({
className,
size = 'default',
children,
...props
}: SelectPrimitive.Trigger.Props & {
size?: 'sm' | 'default';
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
"border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
)}
{children}
<SelectPrimitive.Icon
render={
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
}
/>
</SelectPrimitive.Trigger>
);
}
function SelectContent({
className,
children,
side = 'bottom',
sideOffset = 4,
align = 'center',
alignOffset = 0,
alignItemWithTrigger = true,
...props
}: SelectPrimitive.Popup.Props &
Pick<
SelectPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
>) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Positioner
side={side}
sideOffset={sideOffset}
align={align}
alignOffset={alignOffset}
alignItemWithTrigger={alignItemWithTrigger}
className="isolate z-50"
>
<SelectPrimitive.Popup
data-slot="select-content"
data-align-trigger={alignItemWithTrigger}
className={cn(
'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none',
className,
)}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.List>{children}</SelectPrimitive.List>
<SelectScrollDownButton />
</SelectPrimitive.Popup>
</SelectPrimitive.Positioner>
</SelectPrimitive.Portal>
);
}
function SelectLabel({
className,
...props
}: SelectPrimitive.GroupLabel.Props) {
return (
<SelectPrimitive.GroupLabel
data-slot="select-label"
className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
{...props}
/>
);
}
function SelectItem({
className,
children,
...props
}: SelectPrimitive.Item.Props) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className,
)}
{...props}
>
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
);
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.Label>
> = ({ className, ...props }) => (
<SelectPrimitive.Label
className={cn('px-2 py-1.5 text-sm font-semibold', className)}
{...props}
/>
);
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.Item>
> = ({ className, children, ...props }) => (
<SelectPrimitive.Item
className={cn(
'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" />
</SelectPrimitive.ItemText>
<SelectPrimitive.ItemIndicator
render={
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
}
>
<CheckIcon className="pointer-events-none" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
);
SelectItem.displayName = SelectPrimitive.Item.displayName;
</SelectPrimitive.Item>
);
}
const SelectSeparator: React.FC<
React.ComponentPropsWithRef<typeof SelectPrimitive.Separator>
> = ({ className, ...props }) => (
<SelectPrimitive.Separator
className={cn('bg-muted -mx-1 my-1 h-px', className)}
{...props}
/>
);
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
function SelectSeparator({
className,
...props
}: SelectPrimitive.Separator.Props) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
{...props}
/>
);
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
return (
<SelectPrimitive.ScrollUpArrow
data-slot="select-scroll-up-button"
className={cn(
"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<ChevronUpIcon />
</SelectPrimitive.ScrollUpArrow>
);
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
return (
<SelectPrimitive.ScrollDownArrow
data-slot="select-scroll-down-button"
className={cn(
"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
className,
)}
{...props}
>
<ChevronDownIcon />
</SelectPrimitive.ScrollDownArrow>
);
}
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectGroup,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};

39
packages/ui/src/shadcn/separator.tsx
View File

@@ -1,31 +1,24 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
import { Separator as SeparatorPrimitive } from 'radix-ui';
import { cn } from '../lib/utils';
const Separator: React.FC<
React.ComponentPropsWithRef<typeof SeparatorPrimitive.Root>
> = ({
function Separator({
className,
orientation = 'horizontal',
decorative = true,
...props
}) => (
<SeparatorPrimitive.Root
decorative={decorative}
orientation={orientation}
className={cn(
'bg-border shrink-0',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className,
)}
{...props}
/>
);
Separator.displayName = SeparatorPrimitive.Root.displayName;
}: SeparatorPrimitive.Props) {
return (
<SeparatorPrimitive
data-slot="separator"
orientation={orientation}
className={cn(
'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
className,
)}
{...props}
/>
);
}
export { Separator };

211
packages/ui/src/shadcn/sheet.tsx
View File

@@ -2,128 +2,129 @@
import * as React from 'react';
import { Cross2Icon } from '@radix-ui/react-icons';
import { type VariantProps, cva } from 'class-variance-authority';
import { Dialog as SheetPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
import { XIcon } from 'lucide-react';
import { cn } from '../lib/utils';
import { Button } from './button';
const Sheet = SheetPrimitive.Root;
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
}
const SheetTrigger = SheetPrimitive.Trigger;
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
}
const SheetClose = SheetPrimitive.Close;
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
}
const SheetPortal = SheetPrimitive.Portal;
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
}
const SheetOverlay: React.FC<
React.ComponentPropsWithRef<typeof SheetPrimitive.Overlay>
> = ({ className, ...props }) => (
<SheetPrimitive.Overlay
className={cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
className,
)}
{...props}
/>
);
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
return (
<SheetPrimitive.Backdrop
data-slot="sheet-overlay"
className={cn(
'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
className,
)}
{...props}
/>
);
}
const sheetVariants = cva(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {
top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
bottom:
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
right:
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
},
},
defaultVariants: {
side: 'right',
},
},
);
interface SheetContentProps
extends
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent: React.FC<SheetContentProps> = ({
side = 'right',
function SheetContent({
className,
children,
side = 'right',
showCloseButton = true,
...props
}) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
className={cn(sheetVariants({ side }), className)}
}: SheetPrimitive.Popup.Props & {
side?: 'top' | 'right' | 'bottom' | 'left';
showCloseButton?: boolean;
}) {
return (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Popup
data-slot="sheet-content"
data-side={side}
className={cn(
'bg-background data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
className,
)}
{...props}
>
{children}
{showCloseButton && (
<SheetPrimitive.Close
data-slot="sheet-close"
render={
<Button
variant="ghost"
className="absolute top-3 right-3"
size="icon-sm"
/>
}
>
<XIcon />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
)}
</SheetPrimitive.Popup>
</SheetPortal>
);
}
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="sheet-header"
className={cn('flex flex-col gap-0.5 p-4', className)}
{...props}
>
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
{children}
</SheetPrimitive.Content>
</SheetPortal>
);
SheetContent.displayName = SheetPrimitive.Content.displayName;
/>
);
}
const SheetHeader = ({
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
data-slot="sheet-footer"
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...props}
/>
);
}
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
return (
<SheetPrimitive.Title
data-slot="sheet-title"
className={cn('text-foreground text-base font-medium', className)}
{...props}
/>
);
}
function SheetDescription({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('flex flex-col gap-y-3 text-center sm:text-left', className)}
{...props}
/>
);
SheetHeader.displayName = 'SheetHeader';
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
);
SheetFooter.displayName = 'SheetFooter';
const SheetTitle: React.FC<
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
> = ({ className, ...props }) => (
<SheetPrimitive.Title
className={cn('text-foreground text-lg font-semibold', className)}
{...props}
/>
);
SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription: React.FC<
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
> = ({ className, ...props }) => (
<SheetPrimitive.Description
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
SheetDescription.displayName = SheetPrimitive.Description.displayName;
}: SheetPrimitive.Description.Props) {
return (
<SheetPrimitive.Description
data-slot="sheet-description"
className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
);
}
export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,

931
packages/ui/src/shadcn/sidebar.tsx
View File

File diff suppressed because it is too large Load Diff

10
packages/ui/src/shadcn/skeleton.tsx
View File

@@ -1,12 +1,10 @@
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
return (
<div
className={cn('bg-primary/10 animate-pulse rounded-md', className)}
data-slot="skeleton"
className={cn('bg-muted animate-pulse rounded-md', className)}
{...props}
/>
);

72
packages/ui/src/shadcn/slider.tsx
View File

@@ -2,28 +2,58 @@
import * as React from 'react';
import { Slider as SliderPrimitive } from 'radix-ui';
import { cn } from '#lib/utils';
import { Slider as SliderPrimitive } from '@base-ui/react/slider';
import { cn } from '../lib/utils';
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}: SliderPrimitive.Root.Props) {
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max],
[value, defaultValue, min, max],
);
const Slider = React.forwardRef<
React.ElementRef<typeof SliderPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
<SliderPrimitive.Root
ref={ref}
className={cn(
'relative flex w-full touch-none items-center select-none',
className,
)}
{...props}
>
<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
<SliderPrimitive.Range className="bg-primary absolute h-full" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));
Slider.displayName = SliderPrimitive.Root.displayName;
return (
<SliderPrimitive.Root
className={cn('data-horizontal:w-full data-vertical:h-full', className)}
data-slot="slider"
defaultValue={defaultValue}
value={value}
min={min}
max={max}
thumbAlignment="edge"
{...props}
>
<SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
<SliderPrimitive.Track
data-slot="slider-track"
className="bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
>
<SliderPrimitive.Indicator
data-slot="slider-range"
className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
/>
</SliderPrimitive.Track>
{Array.from({ length: _values.length }, (_, index) => (
<SliderPrimitive.Thumb
data-slot="slider-thumb"
key={index}
className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Control>
</SliderPrimitive.Root>
);
}
export { Slider };

34
packages/ui/src/shadcn/sonner.tsx
View File

@@ -1,9 +1,14 @@
'use client';
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
} from 'lucide-react';
import { useTheme } from 'next-themes';
import { Toaster as Sonner, toast } from 'sonner';
type ToasterProps = React.ComponentProps<typeof Sonner>;
import { Toaster as Sonner, type ToasterProps, toast } from 'sonner';
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = 'system' } = useTheme();
@@ -12,15 +17,24 @@ const Toaster = ({ ...props }: ToasterProps) => {
<Sonner
theme={theme as ToasterProps['theme']}
className="toaster group"
icons={{
success: <CircleCheckIcon className="size-4" />,
info: <InfoIcon className="size-4" />,
warning: <TriangleAlertIcon className="size-4" />,
error: <OctagonXIcon className="size-4" />,
loading: <Loader2Icon className="size-4 animate-spin" />,
}}
style={
{
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
'--border-radius': 'var(--radius)',
} as React.CSSProperties
}
toastOptions={{
classNames: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
toast: 'cn-toast',
},
}}
{...props}

15
packages/ui/src/shadcn/spinner.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { cn } from '#lib/utils';
import { Loader2Icon } from 'lucide-react';
function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
return (
<Loader2Icon
role="status"
aria-label="Loading"
className={cn('size-4 animate-spin', className)}
{...props}
/>
);
}
export { Spinner };

45
packages/ui/src/shadcn/switch.tsx
View File

@@ -1,28 +1,31 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
import { Switch as SwitchPrimitives } from 'radix-ui';
import { cn } from '../lib/utils';
const Switch: React.FC<
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
> = ({ className, ...props }) => (
<SwitchPrimitives.Root
className={cn(
'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
>
<SwitchPrimitives.Thumb
function Switch({
className,
size = 'default',
...props
}: SwitchPrimitive.Root.Props & {
size?: 'sm' | 'default';
}) {
return (
<SwitchPrimitive.Root
data-slot="switch"
data-size={size}
className={cn(
'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
'peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]',
className,
)}
/>
</SwitchPrimitives.Root>
);
Switch.displayName = SwitchPrimitives.Root.displayName;
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
/>
</SwitchPrimitive.Root>
);
}
export { Switch };

180
packages/ui/src/shadcn/table.tsx
View File

@@ -1,94 +1,108 @@
'use client';
import * as React from 'react';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
const Table: React.FC<React.HTMLAttributes<HTMLTableElement>> = ({
className,
...props
}) => (
<div
className={cn('bg-background relative flex flex-1 flex-col overflow-auto')}
>
<table
className={cn('w-full caption-bottom text-sm', className)}
function Table({ className, ...props }: React.ComponentProps<'table'>) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
>
<table
data-slot="table"
className={cn('w-full caption-bottom text-sm', className)}
{...props}
/>
</div>
);
}
function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
return (
<thead
data-slot="table-header"
className={cn('[&_tr]:border-b', className)}
{...props}
/>
</div>
);
);
}
const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
return (
<tbody
data-slot="table-body"
className={cn('[&_tr:last-child]:border-0', className)}
{...props}
/>
);
}
function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
return (
<tfoot
data-slot="table-footer"
className={cn(
'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
/>
);
}
function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
return (
<tr
data-slot="table-row"
className={cn(
'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
className,
)}
{...props}
/>
);
}
function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
return (
<th
data-slot="table-head"
className={cn(
'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
/>
);
}
function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
return (
<td
data-slot="table-cell"
className={cn(
'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
/>
);
}
function TableCaption({
className,
...props
}) => <thead className={cn('[&_tr]:border-b', className)} {...props} />;
const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
className,
...props
}) => (
<tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
);
const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
className,
...props
}) => (
<tfoot
className={cn(
'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
/>
);
const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
className,
...props
}) => (
<tr
className={cn(
'hover:bg-muted/50 data-[state=selected]:bg-muted group/row border-b transition-colors',
className,
)}
{...props}
/>
);
const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
className,
...props
}) => (
<th
className={cn(
'text-muted-foreground h-8 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
className,
)}
{...props}
/>
);
const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
className,
...props
}) => (
<td
className={cn(
'px-2 py-1.5 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
className,
)}
{...props}
/>
);
const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
className,
...props
}) => (
<caption
className={cn('text-muted-foreground mt-4 text-sm', className)}
{...props}
/>
);
}: React.ComponentProps<'caption'>) {
return (
<caption
data-slot="table-caption"
className={cn('text-muted-foreground mt-4 text-sm', className)}
{...props}
/>
);
}
export {
Table,

115
packages/ui/src/shadcn/tabs.tsx
View File

@@ -1,50 +1,81 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
import { type VariantProps, cva } from 'class-variance-authority';
import { Tabs as TabsPrimitive } from 'radix-ui';
function Tabs({
className,
orientation = 'horizontal',
...props
}: TabsPrimitive.Root.Props) {
return (
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
className={cn(
'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col',
className,
)}
{...props}
/>
);
}
import { cn } from '../lib/utils';
const Tabs = TabsPrimitive.Root;
const TabsList: React.FC<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
> = ({ className, ...props }) => (
<TabsPrimitive.List
className={cn(
'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
className,
)}
{...props}
/>
const tabsListVariants = cva(
'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
{
variants: {
variant: {
default: 'bg-muted',
line: 'gap-1 bg-transparent',
},
},
defaultVariants: {
variant: 'default',
},
},
);
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger: React.FC<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
> = ({ className, ...props }) => (
<TabsPrimitive.Trigger
className={cn(
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-xs px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs',
className,
)}
{...props}
/>
);
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
function TabsList({
className,
variant = 'default',
...props
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
data-variant={variant}
className={cn(tabsListVariants({ variant }), className)}
{...props}
/>
);
}
const TabsContent: React.FC<
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
> = ({ className, ...props }) => (
<TabsPrimitive.Content
className={cn(
'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
className,
)}
{...props}
/>
);
TabsContent.displayName = TabsPrimitive.Content.displayName;
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
return (
<TabsPrimitive.Tab
data-slot="tabs-trigger"
className={cn(
"text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
className,
)}
{...props}
/>
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent };
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
return (
<TabsPrimitive.Panel
data-slot="tabs-content"
className={cn('flex-1 text-sm outline-none', className)}
{...props}
/>
);
}
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

13
packages/ui/src/shadcn/textarea.tsx
View File

@@ -1,21 +1,18 @@
import * as React from 'react';
import { cn } from '../lib/utils';
import { cn } from '#lib/utils';
export type TextareaProps = React.ComponentPropsWithRef<'textarea'>;
const Textarea: React.FC<TextareaProps> = ({ className, ...props }) => {
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
return (
<textarea
data-slot="textarea"
className={cn(
'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
className,
)}
{...props}
/>
);
};
Textarea.displayName = 'Textarea';
}
export { Textarea };

90
packages/ui/src/shadcn/toggle-group.tsx Normal file
View File

@@ -0,0 +1,90 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
import { type VariantProps } from 'class-variance-authority';
import { toggleVariants } from './toggle';
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants> & {
spacing?: number;
orientation?: 'horizontal' | 'vertical';
}
>({
size: 'default',
variant: 'default',
spacing: 0,
orientation: 'horizontal',
});
function ToggleGroup({
className,
variant,
size,
spacing = 0,
orientation = 'horizontal',
children,
...props
}: ToggleGroupPrimitive.Props &
VariantProps<typeof toggleVariants> & {
spacing?: number;
orientation?: 'horizontal' | 'vertical';
}) {
return (
<ToggleGroupPrimitive
data-slot="toggle-group"
data-variant={variant}
data-size={size}
data-spacing={spacing}
data-orientation={orientation}
style={{ '--gap': spacing } as React.CSSProperties}
className={cn(
'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]',
className,
)}
{...props}
>
<ToggleGroupContext.Provider
value={{ variant, size, spacing, orientation }}
>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive>
);
}
function ToggleGroupItem({
className,
children,
variant = 'default',
size = 'default',
...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext);
return (
<TogglePrimitive
data-slot="toggle-group-item"
data-variant={context.variant || variant}
data-size={context.size || size}
data-spacing={context.spacing}
className={cn(
'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
className,
)}
{...props}
>
{children}
</TogglePrimitive>
);
}
export { ToggleGroup, ToggleGroupItem };

43
packages/ui/src/shadcn/toggle.tsx Normal file
View File

@@ -0,0 +1,43 @@
'use client';
import { cn } from '#lib/utils';
import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
import { type VariantProps, cva } from 'class-variance-authority';
const toggleVariants = cva(
"group/toggle hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
default: 'bg-transparent',
outline: 'border-input hover:bg-muted border bg-transparent',
},
size: {
default: 'h-8 min-w-8 px-2',
sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',
lg: 'h-9 min-w-9 px-2.5',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
);
function Toggle({
className,
variant = 'default',
size = 'default',
...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
return (
<TogglePrimitive
data-slot="toggle"
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
);
}
export { Toggle, toggleVariants };

78
packages/ui/src/shadcn/tooltip.tsx
View File

@@ -1,29 +1,65 @@
'use client';
import * as React from 'react';
import { cn } from '#lib/utils';
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import { Tooltip as TooltipPrimitive } from 'radix-ui';
function TooltipProvider({
delay = 0,
...props
}: TooltipPrimitive.Provider.Props) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delay={delay}
{...props}
/>
);
}
import { cn } from '../lib/utils';
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
}
const TooltipProvider = TooltipPrimitive.Provider;
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent: React.FC<
React.ComponentPropsWithRef<typeof TooltipPrimitive.Content>
> = ({ className, sideOffset = 4, ...props }) => (
<TooltipPrimitive.Content
sideOffset={sideOffset}
className={cn(
'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs',
className,
)}
{...props}
/>
);
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
function TooltipContent({
className,
side = 'top',
sideOffset = 4,
align = 'center',
alignOffset = 0,
children,
...props
}: TooltipPrimitive.Popup.Props &
Pick<
TooltipPrimitive.Positioner.Props,
'align' | 'alignOffset' | 'side' | 'sideOffset'
>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Positioner
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={sideOffset}
className="isolate z-50"
>
<TooltipPrimitive.Popup
data-slot="tooltip-content"
className={cn(
'bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm',
className,
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
</TooltipPrimitive.Popup>
</TooltipPrimitive.Positioner>
</TooltipPrimitive.Portal>
);
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

4
packages/ui/tsconfig.json
View File

@@ -11,6 +11,6 @@
"~/ui/*": ["./src/shadcn/*"]
}
},
"include": ["*.ts", "src"],
"include": ["src"],
"exclude": ["node_modules"]
}
}