rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-01 08:34:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into patch-2

Browse Source
This commit is contained in:
shadcn
2026-03-03 17:14:03 +04:00
committed by GitHub
parent 29ea3a7d67 ce3fc7625a
commit c44d89a742
2163 changed files with 4653 additions and 4692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/code-check.yml vendored
View File

@@ -77,6 +77,9 @@ jobs:
- name: Install dependencies
run: pnpm install
- name: Build packages
run: pnpm --filter=shadcn build
- run: pnpm format:check
tsc:

1
.prettierignore
View File

@@ -5,3 +5,4 @@ build
.contentlayer
**/fixtures
deprecated
packages

2
apps/v4/app/(app)/(root)/components/appearance-settings.tsx
View File

@@ -93,7 +93,7 @@ export function AppearanceSettings() {
value={gpuCount}
onChange={handleGpuInputChange}
size={3}
className="h-7 !w-14 font-mono"
className="h-7 w-14! font-mono"
maxLength={3}
/>
<Button

2
apps/v4/app/(app)/(root)/components/field-hear.tsx
View File

@@ -46,7 +46,7 @@ export function FieldHear() {
<FieldLabel
htmlFor={option.value}
key={option.value}
className="!w-fit"
className="w-fit!"
>
<Field
orientation="horizontal"

2
apps/v4/app/(app)/(root)/components/index.tsx
View File

@@ -19,7 +19,7 @@ import { SpinnerEmpty } from "./spinner-empty"
export function RootComponents() {
return (
<div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
<div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
<div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
<FieldDemo />
</div>

4
apps/v4/app/(app)/(root)/components/input-group-button.tsx
View File

@@ -24,7 +24,7 @@ export function InputGroupButtonExample() {
Input Secure
</Label>
<InputGroup className="[--radius:9999px]">
<InputGroupInput id="input-secure-19" className="!pl-0.5" />
<InputGroupInput id="input-secure-19" className="pl-0.5!" />
<Popover>
<PopoverTrigger asChild>
<InputGroupAddon>
@@ -46,7 +46,7 @@ export function InputGroupButtonExample() {
<p>You should not enter any sensitive information on this site.</p>
</PopoverContent>
</Popover>
<InputGroupAddon className="text-muted-foreground !pl-1">
<InputGroupAddon className="pl-1! text-muted-foreground">
https://
</InputGroupAddon>
<InputGroupAddon align="inline-end">

6
apps/v4/app/(app)/(root)/components/input-group-demo.tsx
View File

@@ -32,7 +32,7 @@ export function InputGroupDemo() {
<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupInput placeholder="example.com" className="!pl-1" />
<InputGroupInput placeholder="example.com" className="pl-1!" />
<InputGroupAddon>
<InputGroupText>https://</InputGroupText>
</InputGroupAddon>
@@ -73,7 +73,7 @@ export function InputGroupDemo() {
</DropdownMenuContent>
</DropdownMenu>
<InputGroupText className="ml-auto">52% used</InputGroupText>
<Separator orientation="vertical" className="!h-4" />
<Separator orientation="vertical" className="h-4!" />
<InputGroupButton
variant="default"
className="rounded-full"
@@ -87,7 +87,7 @@ export function InputGroupDemo() {
<InputGroup>
<InputGroupInput placeholder="@shadcn" />
<InputGroupAddon align="inline-end">
<div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
<div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
<IconCheck className="size-3 text-white" />
</div>
</InputGroupAddon>

2
apps/v4/app/(app)/(root)/components/item-avatar.tsx
View File

@@ -42,7 +42,7 @@ export function ItemAvatar() {
</Item>
<Item variant="outline">
<ItemMedia>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
<Avatar className="hidden sm:flex">
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>

8
apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
View File

@@ -247,7 +247,7 @@ export function NotionPromptForm() {
</Command>
</PopoverContent>
</Popover>
<div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
<div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
{mentions.map((mention) => {
const item = SAMPLE_DATA.mentionable.find(
(item) => item.title === mention
@@ -262,7 +262,7 @@ export function NotionPromptForm() {
key={mention}
size="sm"
variant="secondary"
className="rounded-full !pl-2"
className="rounded-full pl-2!"
onClick={() => {
setMentions((prev) => prev.filter((m) => m !== mention))
}}
@@ -308,7 +308,7 @@ export function NotionPromptForm() {
className="min-w-48"
>
<DropdownMenuGroup>
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
Select Agent Mode
</DropdownMenuLabel>
{SAMPLE_DATA.models.map((model) => (
@@ -426,7 +426,7 @@ export function NotionPromptForm() {
<DropdownMenuItem>
<IconPlus /> Connect Apps
</DropdownMenuItem>
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
We&apos;ll only search in the sources selected here.
</DropdownMenuLabel>
</DropdownMenuGroup>

8
apps/v4/app/(app)/(root)/page.tsx
View File

@@ -64,12 +64,12 @@ export default function IndexPage() {
</PageActions>
</PageHeader>
<PageNav className="hidden md:flex">
<ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
<ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
<ThemeSelector className="mr-4 hidden md:flex" />
</PageNav>
<div className="container-wrapper section-soft flex-1 pb-6">
<div className="container-wrapper flex-1 section-soft pb-6">
<div className="container overflow-hidden">
<section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
<section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
<Image
src="/r/styles/new-york-v4/dashboard-01-light.png"
width={1400}
@@ -87,7 +87,7 @@ export default function IndexPage() {
priority
/>
</section>
<section className="theme-container hidden md:block">
<section className="hidden theme-container md:block">
<RootComponents />
</section>
</div>

2
apps/v4/app/(app)/blocks/layout.tsx
View File

@@ -71,7 +71,7 @@ export default function BlocksLayout({
<Link href="/blocks/sidebar">Browse all blocks</Link>
</Button>
</PageNav>
<div className="container-wrapper section-soft flex-1 md:py-12">
<div className="container-wrapper flex-1 section-soft md:py-12">
<div className="container">{children}</div>
</div>
</>

2
apps/v4/app/(app)/colors/layout.tsx
View File

@@ -62,7 +62,7 @@ export default function ColorsLayout({
<div className="hidden">
<div className="container-wrapper">
<div className="container flex items-center justify-between gap-8 py-4">
<ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
<ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
</div>
</div>
</div>

2
apps/v4/app/(app)/docs/[[...slug]]/page.tsx
View File

@@ -134,7 +134,7 @@ export default async function Page(props: {
</div>
</div>
{doc.description && (
<p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
<p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
{doc.description}
</p>
)}

12
apps/v4/app/(app)/docs/changelog/page.tsx
View File

@@ -57,7 +57,7 @@ export default function ChangelogPage() {
</a>
</Button>
</div>
<p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
<p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
Latest updates and announcements.
</p>
</div>
@@ -91,9 +91,9 @@ export default function ChangelogPage() {
<Link
key={page.url}
href={page.url}
className="bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col rounded-xl px-4 py-3 transition-colors"
className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
>
<span className="text-muted-foreground text-xs">
<span className="text-xs text-muted-foreground">
{date}
</span>
<span className="text-sm font-medium">{title}</span>
@@ -110,7 +110,7 @@ export default function ChangelogPage() {
<div className="h-(--top-spacing) shrink-0"></div>
<div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
<div className="flex flex-col gap-2 p-4 pt-0 text-sm">
<p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
<p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
On This Page
</p>
{latestPages.map((page) => {
@@ -119,7 +119,7 @@ export default function ChangelogPage() {
<Link
key={page.url}
href={page.url}
className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
>
{data.title}
</Link>
@@ -128,7 +128,7 @@ export default function ChangelogPage() {
{olderPages.length > 0 && (
<a
href="#more-updates"
className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
>
More Updates
</a>

2
apps/v4/app/(app)/docs/layout.tsx
View File

@@ -10,7 +10,7 @@ export default function DocsLayout({
return (
<div className="container-wrapper flex flex-1 flex-col px-2">
<SidebarProvider
className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
style={
{
"--sidebar-width": "calc(var(--spacing) * 72)",

6
apps/v4/app/(app)/examples/authentication/page.tsx
View File

@@ -43,8 +43,8 @@ export default function AuthenticationPage() {
>
Login
</Link>
<div className="text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r">
<div className="bg-primary/5 absolute inset-0" />
<div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
<div className="absolute inset-0 bg-primary/5" />
<div className="relative z-20 flex items-center text-lg font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export default function AuthenticationPage() {
<h1 className="text-2xl font-semibold tracking-tight">
Create an account
</h1>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Enter your email below to create your account
</p>
</div>

4
apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
View File

@@ -159,10 +159,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:!p-1.5"
className="data-[slot=sidebar-menu-button]:p-1.5!"
>
<Link href="#">
<IconInnerShadowTop className="!size-5" />
<IconInnerShadowTop className="size-5!" />
<span className="text-base font-semibold">Acme Inc.</span>
</Link>
</SidebarMenuButton>

2
apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
View File

@@ -174,7 +174,7 @@ export function ChartAreaInteractive() {
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
>
<ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
<ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>

22
apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
View File

@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
{...listeners}
variant="ghost"
size="icon"
className="text-muted-foreground size-7 hover:bg-transparent"
className="size-7 text-muted-foreground hover:bg-transparent"
>
<IconGripVertical className="text-muted-foreground size-3" />
<IconGripVertical className="size-3 text-muted-foreground" />
<span className="sr-only">Drag to reorder</span>
</Button>
)
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
header: "Section Type",
cell: ({ row }) => (
<div className="w-32">
<Badge variant="outline" className="text-muted-foreground px-1.5">
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.type}
</Badge>
</div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
accessorKey: "status",
header: "Status",
cell: ({ row }) => (
<Badge variant="outline" className="text-muted-foreground px-1.5">
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.status === "Done" ? (
<IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
Target
</Label>
<Input
className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.target}
id={`${row.original.id}-target`}
/>
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
Limit
</Label>
<Input
className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.limit}
id={`${row.original.id}-limit`}
/>
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
size="icon"
>
<IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
<SelectItem value="focus-documents">Focus Documents</SelectItem>
</SelectContent>
</Select>
<TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
<TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
<TabsTrigger value="outline">Outline</TabsTrigger>
<TabsTrigger value="past-performance">
Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
id={sortableId}
>
<Table>
<TableHeader className="bg-muted sticky top-0 z-10">
<TableHeader className="sticky top-0 z-10 bg-muted">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
</DndContext>
</div>
<div className="flex items-center justify-between px-4">
<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
<div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
return (
<Drawer direction={isMobile ? "bottom" : "right"}>
<DrawerTrigger asChild>
<Button variant="link" className="text-foreground w-fit px-0 text-left">
<Button variant="link" className="w-fit px-0 text-left text-foreground">
{item.header}
</Button>
</DrawerTrigger>

2
apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
View File

@@ -52,7 +52,7 @@ export function NavDocuments({
<DropdownMenuTrigger asChild>
<SidebarMenuAction
showOnHover
className="data-[state=open]:bg-accent rounded-sm"
className="rounded-sm data-[state=open]:bg-accent"
>
<IconDots />
<span className="sr-only">More</span>

4
apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
View File

@@ -55,7 +55,7 @@ export function NavUser({
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>
@@ -76,7 +76,7 @@ export function NavUser({
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>

2
apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
View File

@@ -4,7 +4,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"
export function SiteHeader() {
return (
<header className="bg-background/90 sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
<header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/90 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
<div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
<h1 className="text-base font-medium">Documents</h1>
<div className="ml-auto flex items-center gap-2">

8
apps/v4/app/(app)/examples/layout.tsx
View File

@@ -65,12 +65,12 @@ export default function ExamplesLayout({
</PageActions>
</PageHeader>
<PageNav id="examples" className="hidden md:flex">
<ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
<ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
<ThemeSelector className="mr-4 hidden md:flex" />
</PageNav>
<div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
<div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
<div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
<div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
<div className="container flex flex-1 scroll-mt-20 flex-col theme-container">
<div className="flex flex-col overflow-hidden rounded-lg border bg-background bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
{children}
</div>
</div>

2
apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
View File

@@ -76,7 +76,7 @@ export function CodeViewer() {
</pre>
</div>
<div>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Your API Key can be found here. You should use environment
variables or a secret management tool to expose your key to your
applications.

2
apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
View File

@@ -27,7 +27,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
<div className="grid gap-4">
<div className="flex items-center justify-between">
<Label htmlFor="maxlength">Maximum Length</Label>
<span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
<span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
{value}
</span>
</div>

4
apps/v4/app/(app)/examples/playground/components/model-selector.tsx
View File

@@ -78,7 +78,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
>
<div className="grid gap-2">
<h4 className="leading-none font-medium">{peekedModel.name}</h4>
<div className="text-muted-foreground text-sm">
<div className="text-sm text-muted-foreground">
{peekedModel.description}
</div>
{peekedModel.strengths ? (
@@ -86,7 +86,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
<h5 className="text-sm leading-none font-medium">
Strengths
</h5>
<ul className="text-muted-foreground text-sm">
<ul className="text-sm text-muted-foreground">
{peekedModel.strengths}
</ul>
</div>

4
apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
View File

@@ -70,7 +70,7 @@ export function PresetActions() {
</DialogDescription>
</DialogHeader>
<div className="py-6">
<h4 className="text-muted-foreground text-sm">
<h4 className="text-sm text-muted-foreground">
Playground Warnings
</h4>
<div className="flex items-start justify-between gap-4 pt-3">
@@ -79,7 +79,7 @@ export function PresetActions() {
<span className="font-semibold">
Show a warning when content is flagged
</span>
<span className="text-muted-foreground text-sm">
<span className="text-sm text-muted-foreground">
A warning will be shown when sexual, hateful, violent or
self-harm content is detected.
</span>

2
apps/v4/app/(app)/examples/playground/components/preset-share.tsx
View File

@@ -18,7 +18,7 @@ export function PresetShare() {
<PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
<div className="flex flex-col gap-1 text-center sm:text-left">
<h3 className="text-lg font-semibold">Share preset</h3>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Anyone who has this link and an OpenAI account will be able to view
this.
</p>

2
apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
View File

@@ -29,7 +29,7 @@ export function TemperatureSelector({
<div className="grid gap-4">
<div className="flex items-center justify-between">
<Label htmlFor="temperature">Temperature</Label>
<span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
<span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
{value}
</span>
</div>

2
apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
View File

@@ -27,7 +27,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
<div className="grid gap-4">
<div className="flex items-center justify-between">
<Label htmlFor="top-p">Top P</Label>
<span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
<span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
{value}
</span>
</div>

4
apps/v4/app/(app)/examples/playground/page.tsx
View File

@@ -278,7 +278,7 @@ export default function PlaygroundPage() {
placeholder="We're writing to [inset]. Congrats from OpenAI!"
className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
/>
<div className="bg-muted rounded-md border"></div>
<div className="rounded-md border bg-muted"></div>
</div>
<div className="flex items-center gap-2">
<Button>Submit</Button>
@@ -312,7 +312,7 @@ export default function PlaygroundPage() {
/>
</div>
</div>
<div className="bg-muted min-h-[400px] rounded-md border lg:min-h-[700px]" />
<div className="min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
</div>
<div className="flex items-center gap-2">
<Button>Submit</Button>

2
apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
View File

@@ -128,7 +128,7 @@ export function AppearanceSettings() {
value={gpuCount}
onChange={handleGpuInputChange}
size={3}
className="h-7 !w-14 font-mono"
className="h-7 w-14! font-mono"
maxLength={3}
/>
<Button

2
apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
View File

@@ -63,7 +63,7 @@ export function FieldHear() {
<FieldLabel
htmlFor={`rtl-${option.value}`}
key={option.value}
className="!w-fit"
className="w-fit!"
>
<Field
orientation="horizontal"

2
apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
View File

@@ -50,7 +50,7 @@ export function InputGroupButtonExample() {
{t.inputLabel}
</Label>
<InputGroup className="[--radius:9999px]">
<InputGroupInput id="input-secure-rtl" className="!pr-0.5" />
<InputGroupInput id="input-secure-rtl" className="pr-0.5!" />
<InputGroupAddon>
<Popover>
<PopoverTrigger

4
apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
View File

@@ -116,7 +116,7 @@ export function InputGroupDemo() {
</DropdownMenuContent>
</DropdownMenu>
<InputGroupText className="ms-auto">{t.used}</InputGroupText>
<Separator orientation="vertical" className="!h-4" />
<Separator orientation="vertical" className="h-4!" />
<InputGroupButton
variant="default"
className="rounded-full"
@@ -130,7 +130,7 @@ export function InputGroupDemo() {
<InputGroup>
<InputGroupInput placeholder="shadcn" />
<InputGroupAddon align="inline-end">
<div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
<div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
<IconCheck className="size-3 text-white" />
</div>
</InputGroupAddon>

8
apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
View File

@@ -288,7 +288,7 @@ export function NotionPromptForm() {
</Command>
</PopoverContent>
</Popover>
<div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
<div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
{mentions.map((mention) => {
const item = SAMPLE_DATA.mentionable.find(
(item) => item.title === mention
@@ -303,7 +303,7 @@ export function NotionPromptForm() {
key={mention}
size="sm"
variant="secondary"
className="rounded-full !pr-2"
className="rounded-full pr-2!"
onClick={() => {
setMentions((prev) => prev.filter((m) => m !== mention))
}}
@@ -352,7 +352,7 @@ export function NotionPromptForm() {
dir={t.dir}
>
<DropdownMenuGroup className="w-48">
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
{t.selectAgentMode}
</DropdownMenuLabel>
{SAMPLE_DATA.models.map((model) => (
@@ -493,7 +493,7 @@ export function NotionPromptForm() {
<DropdownMenuItem>
<IconPlus /> {t.connectApps}
</DropdownMenuItem>
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
{t.searchSourcesNote}
</DropdownMenuLabel>
</DropdownMenuGroup>

4
apps/v4/app/(app)/examples/tasks/components/columns.tsx
View File

@@ -79,7 +79,7 @@ export const columns: ColumnDef<Task>[] = [
return (
<div className="flex w-[100px] items-center gap-2">
{status.icon && (
<status.icon className="text-muted-foreground size-4" />
<status.icon className="size-4 text-muted-foreground" />
)}
<span>{status.label}</span>
</div>
@@ -106,7 +106,7 @@ export const columns: ColumnDef<Task>[] = [
return (
<div className="flex items-center gap-2">
{priority.icon && (
<priority.icon className="text-muted-foreground size-4" />
<priority.icon className="size-4 text-muted-foreground" />
)}
<span>{priority.label}</span>
</div>

2
apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
View File

@@ -33,7 +33,7 @@ export function DataTableColumnHeader<TData, TValue>({
<Button
variant="ghost"
size="sm"
className="data-[state=open]:bg-accent -ml-3 h-8"
className="-ml-3 h-8 data-[state=open]:bg-accent"
>
<span>{title}</span>
{column.getIsSorted() === "desc" ? (

8
apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
View File

@@ -107,18 +107,18 @@ export function DataTableFacetedFilter<TData, TValue>({
className={cn(
"flex size-4 items-center justify-center rounded-[4px] border",
isSelected
? "bg-primary border-primary text-primary-foreground"
? "border-primary bg-primary text-primary-foreground"
: "border-input [&_svg]:invisible"
)}
>
<Check className="text-primary-foreground size-3.5" />
<Check className="size-3.5 text-primary-foreground" />
</div>
{option.icon && (
<option.icon className="text-muted-foreground size-4" />
<option.icon className="size-4 text-muted-foreground" />
)}
<span>{option.label}</span>
{facets?.get(option.value) && (
<span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
<span className="ml-auto flex size-4 items-center justify-center font-mono text-xs text-muted-foreground">
{facets.get(option.value)}
</span>
)}

2
apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
View File

@@ -24,7 +24,7 @@ export function DataTablePagination<TData>({
}: DataTablePaginationProps<TData>) {
return (
<div className="flex items-center justify-between px-2">
<div className="text-muted-foreground flex-1 text-sm">
<div className="flex-1 text-sm text-muted-foreground">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>

2
apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
View File

@@ -36,7 +36,7 @@ export function DataTableRowActions<TData>({
<Button
variant="ghost"
size="icon"
className="data-[state=open]:bg-muted size-8"
className="size-8 data-[state=open]:bg-muted"
>
<MoreHorizontal />
<span className="sr-only">Open menu</span>

2
apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
View File

@@ -30,7 +30,7 @@ export function UserNav() {
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm leading-none font-medium">shadcn</p>
<p className="text-muted-foreground text-xs leading-none">
<p className="text-xs leading-none text-muted-foreground">
m@example.com
</p>
</div>

2
apps/v4/app/(app)/layout.tsx
View File

@@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
return (
<div
data-slot="layout"
className="bg-background relative z-10 flex min-h-svh flex-col"
className="relative z-10 flex min-h-svh flex-col bg-background"
>
<SiteHeader />
<main className="flex flex-1 flex-col">{children}</main>

4
apps/v4/app/(app)/themes/page.tsx
View File

@@ -12,8 +12,8 @@ export default function ThemesPage() {
<ThemeCustomizer />
</div>
</div>
<div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
<div className="theme-container container flex flex-1 flex-col">
<div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
<div className="container flex flex-1 flex-col theme-container">
<CardsDemo />
</div>
</div>

10
apps/v4/app/(create)/components/accent-picker.tsx
View File

@@ -30,12 +30,12 @@ export function MenuAccentPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Menu Accent</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Menu Accent</div>
<div className="text-sm font-medium text-foreground">
{currentAccent?.label}
</div>
</div>
<div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="128"
@@ -51,7 +51,7 @@ export function MenuAccentPicker({
strokeLinecap="round"
strokeLinejoin="round"
data-accent={currentAccent?.value}
className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
></path>
<path
d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
@@ -60,7 +60,7 @@ export function MenuAccentPicker({
strokeLinecap="round"
strokeLinejoin="round"
data-accent={currentAccent?.value}
className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
></path>
</svg>
</div>

6
apps/v4/app/(create)/components/base-color-picker.tsx
View File

@@ -39,8 +39,8 @@ export function BaseColorPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Base Color</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Base Color</div>
<div className="text-sm font-medium text-foreground">
{currentBaseColor?.title}
</div>
</div>
@@ -107,7 +107,7 @@ export function BaseColorPicker({
<div>
Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
</div>
<div className="text-muted-foreground text-xs pointer-coarse:text-sm">
<div className="text-xs text-muted-foreground pointer-coarse:text-sm">
Base colors are easier to see in dark mode.
</div>
</div>

8
apps/v4/app/(create)/components/base-picker.tsx
View File

@@ -43,14 +43,14 @@ export function BasePicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Component Library</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Component Library</div>
<div className="text-sm font-medium text-foreground">
{currentBase?.title}
</div>
</div>
{currentBase?.meta?.logo && (
<div
className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none *:[svg]:size-4 *:[svg]:text-foreground!"
dangerouslySetInnerHTML={{
__html: currentBase.meta.logo,
}}
@@ -71,7 +71,7 @@ export function BasePicker({
<PickerRadioItem key={base.name} value={base.name}>
{base.meta?.logo && (
<div
className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
className="size-4 shrink-0 text-foreground [&_svg]:size-4 *:[svg]:text-foreground!"
dangerouslySetInnerHTML={{
__html: base.meta.logo,
}}

2
apps/v4/app/(create)/components/customizer.tsx
View File

@@ -35,7 +35,7 @@ export function Customizer() {
return (
<div
className="no-scrollbar -mx-2.5 flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
className="-mx-2.5 no-scrollbar flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
ref={anchorRef}
>
<div className="no-scrollbar h-14 overflow-x-auto overflow-y-hidden p-px md:h-full md:overflow-x-hidden md:overflow-y-auto">

8
apps/v4/app/(create)/components/font-picker.tsx
View File

@@ -43,13 +43,13 @@ export function FontPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Font</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Font</div>
<div className="text-sm font-medium text-foreground">
{currentFont?.name}
</div>
</div>
<div
className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none"
style={{ fontFamily: currentFont?.font.style.fontFamily }}
>
Aa
@@ -73,7 +73,7 @@ export function FontPicker({
<PickerRadioItem value={font.value}>
<Item size="xs">
<ItemContent className="gap-1">
<ItemTitle className="text-muted-foreground text-xs font-medium">
<ItemTitle className="text-xs font-medium text-muted-foreground">
{font.name}
</ItemTitle>
<ItemDescription

10
apps/v4/app/(create)/components/icon-library-picker.tsx
View File

@@ -248,12 +248,12 @@ export function IconLibraryPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Icon Library</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Icon Library</div>
<div className="text-sm font-medium text-foreground">
{currentIconLibrary?.title}
</div>
</div>
<div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none *:[svg]:text-foreground!">
{logos[currentIconLibrary?.name as keyof typeof logos]}
</div>
</PickerTrigger>
@@ -306,7 +306,7 @@ function IconLibraryPickerItem({
>
<Item size="xs">
<ItemContent className="gap-1">
<ItemTitle className="text-muted-foreground text-xs font-medium">
<ItemTitle className="text-xs font-medium text-muted-foreground">
{iconLibrary.title}
</ItemTitle>
<IconLibraryPreview iconLibrary={iconLibrary.name} />
@@ -345,7 +345,7 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
{previewIcons.map((iconName) => (
<div
key={iconName}
className="bg-muted size-6 animate-pulse rounded"
className="size-6 animate-pulse rounded bg-muted"
/>
))}
</div>

12
apps/v4/app/(create)/components/item-explorer.tsx
View File

@@ -51,7 +51,7 @@ export function ItemExplorer({
className="sticky z-30 hidden h-[calc(100svh-var(--header-height)-2rem)] overscroll-none bg-transparent xl:flex"
collapsible="none"
>
<SidebarContent className="no-scrollbar -mx-1 overflow-x-hidden">
<SidebarContent className="-mx-1 no-scrollbar overflow-x-hidden">
{groupedItems.map((group) => (
<Collapsible
key={group.type}
@@ -60,26 +60,26 @@ export function ItemExplorer({
>
<SidebarGroup className="px-1 py-0">
<CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
<ChevronRightIcon className="text-muted-foreground size-3.5 transition-transform" />
<ChevronRightIcon className="size-3.5 text-muted-foreground transition-transform" />
<span>{group.title}</span>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu className="border-border/50 relative ml-1.5 border-l pl-2">
<SidebarMenu className="relative ml-1.5 border-l border-border/50 pl-2">
{group.items.map((item, index) => (
<SidebarMenuItem key={item.name} className="relative">
<div
className={cn(
"border-border/50 absolute top-1/2 -left-2 h-px w-2 border-t",
"absolute top-1/2 -left-2 h-px w-2 border-t border-border/50",
index === group.items.length - 1 && "bg-sidebar"
)}
/>
{index === group.items.length - 1 && (
<div className="bg-sidebar absolute top-1/2 -bottom-1 -left-2.5 w-1" />
<div className="absolute top-1/2 -bottom-1 -left-2.5 w-1 bg-sidebar" />
)}
<SidebarMenuButton
onClick={() => setParams({ item: item.name })}
className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
className="relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
data-active={item.name === currentItem?.name}
isActive={item.name === currentItem?.name}
>

14
apps/v4/app/(create)/components/item-picker.tsx
View File

@@ -99,7 +99,7 @@ export function ItemPicker({
variant="outline"
aria-label="Select item"
size="sm"
className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-64"
className="h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl border-foreground/10 bg-muted/50 pr-4! pl-2.5 text-left shadow-none select-none data-popup-open:bg-muted *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:bg-background sm:pr-2! xl:max-w-64 dark:bg-muted/50 dark:data-popup-open:bg-muted/50 md:dark:bg-background"
/>
}
>
@@ -107,14 +107,14 @@ export function ItemPicker({
{(value) => (
<>
<div className="flex flex-col justify-start text-left sm:hidden">
<div className="text-muted-foreground text-xs font-normal">
<div className="text-xs font-normal text-muted-foreground">
Preview
</div>
<div className="text-foreground text-sm font-medium">
<div className="text-sm font-medium text-foreground">
{value?.title || "Not Found"}
</div>
</div>
<div className="text-foreground hidden flex-1 text-sm sm:flex">
<div className="hidden flex-1 text-sm text-foreground sm:flex">
{value?.title || "Not Found"}
</div>
</>
@@ -123,14 +123,14 @@ export function ItemPicker({
<HugeiconsIcon icon={Search01Icon} />
</ComboboxTrigger>
<ComboboxContent
className="ring-foreground/10 min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 data-open:animate-none sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0 xl:w-96"
className="min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 ring-foreground/10 sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0 xl:w-96 data-open:animate-none"
side="bottom"
align="end"
>
<ComboboxInput
showTrigger={false}
placeholder="Search"
className="bg-muted h-8 rounded-lg shadow-none has-focus-visible:border-inherit! has-focus-visible:ring-0! pointer-coarse:hidden"
className="h-8 rounded-lg bg-muted shadow-none has-focus-visible:border-inherit! has-focus-visible:ring-0! pointer-coarse:hidden"
/>
<ComboboxEmpty>No items found.</ComboboxEmpty>
<ComboboxList className="no-scrollbar scroll-my-1 pb-1">
@@ -145,7 +145,7 @@ export function ItemPicker({
className="group/combobox-item rounded-lg pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base"
>
{item.title}
<span className="text-muted-foreground ml-auto text-xs opacity-0 group-data-[selected=true]/combobox-item:opacity-100">
<span className="ml-auto text-xs text-muted-foreground opacity-0 group-data-[selected=true]/combobox-item:opacity-100">
{group.title}
</span>
</ComboboxItem>

2
apps/v4/app/(create)/components/lock-button.tsx
View File

@@ -40,7 +40,7 @@ export function LockButton({
<HugeiconsIcon
icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
strokeWidth={2}
className="text-foreground size-5"
className="size-5 text-foreground"
/>
</button>
</TooltipTrigger>

6
apps/v4/app/(create)/components/menu-picker.tsx
View File

@@ -123,12 +123,12 @@ export function MenuColorPicker({
<Picker>
<PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Menu Color</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Menu Color</div>
<div className="text-sm font-medium text-foreground">
{currentMenu?.label}
</div>
</div>
<div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
{currentMenu?.icon}
</div>
</PickerTrigger>

20
apps/v4/app/(create)/components/picker.tsx
View File

@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
<MenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
className={cn(
"hover:bg-muted data-popup-open:bg-muted border-foreground/10 bg-muted/50 relative w-[160px] shrink-0 touch-manipulation rounded-xl border p-2 select-none disabled:opacity-50 md:w-full md:rounded-lg md:border-transparent md:bg-transparent",
"relative w-[160px] shrink-0 touch-manipulation rounded-xl border border-foreground/10 bg-muted/50 p-2 select-none hover:bg-muted disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:border-transparent md:bg-transparent",
className
)}
{...props}
@@ -53,7 +53,7 @@ function PickerContent({
<MenuPrimitive.Popup
data-slot="dropdown-menu-content"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 bg-popover text-popover-foreground cn-menu-target ring-foreground/10 no-scrollbar z-50 max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(3.5)))] min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden md:w-52",
"cn-menu-target z-50 no-scrollbar max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(3.5)))] min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none 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 md:w-52 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
className
)}
{...props}
@@ -80,7 +80,7 @@ function PickerLabel({
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
"px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
className
)}
{...props}
@@ -103,7 +103,7 @@ function PickerItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
className
)}
{...props}
@@ -128,7 +128,7 @@ function PickerSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -158,7 +158,7 @@ function PickerSubContent({
<PickerContent
data-slot="dropdown-menu-sub-content"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100",
"w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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",
className
)}
align={align}
@@ -180,7 +180,7 @@ function PickerCheckboxItem({
<MenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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",
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
@@ -220,7 +220,7 @@ function PickerRadioItem({
<MenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -252,7 +252,7 @@ function PickerSeparator({
return (
<MenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
)
@@ -263,7 +263,7 @@ function PickerShortcut({ className, ...props }: React.ComponentProps<"span">) {
<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",
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
className
)}
{...props}

4
apps/v4/app/(create)/components/preset-picker.tsx
View File

@@ -80,8 +80,8 @@ export function PresetPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Preset</div>
<div className="text-foreground line-clamp-1 text-sm font-medium">
<div className="text-xs text-muted-foreground">Preset</div>
<div className="line-clamp-1 text-sm font-medium text-foreground">
{currentPreset?.description ?? "Custom"}
</div>
</div>

2
apps/v4/app/(create)/components/preview-controls.tsx
View File

@@ -23,7 +23,7 @@ export function PreviewControls() {
setParams({ size: parseInt(newValue) })
}
}}
className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
className="gap-1 *:data-[slot=toggle-group-item]:size-6! *:data-[slot=toggle-group-item]:rounded-sm!"
>
<ToggleGroupItem value="100" title="Desktop">
<Monitor />

4
apps/v4/app/(create)/components/preview.tsx
View File

@@ -105,8 +105,8 @@ export function Preview() {
return (
<div className="relative -mx-1 flex flex-1 flex-col justify-center sm:mx-0">
<div className="ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px] relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1">
<div className="bg-muted dark:bg-muted/30 absolute inset-0 rounded-2xl" />
<div className="relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1 ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px]">
<div className="absolute inset-0 rounded-2xl bg-muted dark:bg-muted/30" />
<iframe
key={params.base + params.item}
ref={iframeRef}

8
apps/v4/app/(create)/components/radius-picker.tsx
View File

@@ -31,12 +31,12 @@ export function RadiusPicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Radius</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Radius</div>
<div className="text-sm font-medium text-foreground">
{currentRadius?.label}
</div>
</div>
<div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -74,7 +74,7 @@ export function RadiusPicker({
>
<div className="flex flex-col justify-start pointer-coarse:gap-1">
<div>{defaultRadius.label}</div>
<div className="text-muted-foreground text-xs pointer-coarse:text-sm">
<div className="text-xs text-muted-foreground pointer-coarse:text-sm">
Use radius from style
</div>
</div>

8
apps/v4/app/(create)/components/random-button.tsx
View File

@@ -123,16 +123,16 @@ export function RandomButton() {
variant="ghost"
size="sm"
onClick={handleRandomize}
className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
className="h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border border-foreground/10 bg-muted/50 select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Shuffle</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Shuffle</div>
<div className="text-sm font-medium text-foreground">
Try Random
</div>
</div>
<HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
<Kbd className="bg-foreground/10 text-foreground hidden md:flex">
<Kbd className="hidden bg-foreground/10 text-foreground md:flex">
R
</Kbd>
</Button>

6
apps/v4/app/(create)/components/reset-button.tsx
View File

@@ -44,11 +44,11 @@ export function ResetButton() {
<Button
variant="ghost"
size="sm"
className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
className="hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border border-foreground/10 bg-muted/50 select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Reset</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Reset</div>
<div className="text-sm font-medium text-foreground">
Start Over
</div>
</div>

6
apps/v4/app/(create)/components/style-picker.tsx
View File

@@ -33,8 +33,8 @@ export function StylePicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Style</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Style</div>
<div className="text-sm font-medium text-foreground">
{currentStyle?.title}
</div>
</div>
@@ -72,7 +72,7 @@ export function StylePicker({
)}
<div className="flex flex-col justify-start pointer-coarse:gap-1">
<div>{style.title}</div>
<div className="text-muted-foreground text-xs pointer-coarse:text-sm">
<div className="text-xs text-muted-foreground pointer-coarse:text-sm">
{style.description}
</div>
</div>

8
apps/v4/app/(create)/components/template-picker.tsx
View File

@@ -45,14 +45,14 @@ export function TemplatePicker({
<Picker>
<PickerTrigger className="hidden md:flex">
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Template</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Template</div>
<div className="text-sm font-medium text-foreground">
{currentTemplate?.title}
</div>
</div>
{currentTemplate?.logo && (
<div
className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none *:[svg]:size-4 *:[svg]:text-foreground!"
dangerouslySetInnerHTML={{
__html: currentTemplate.logo,
}}
@@ -77,7 +77,7 @@ export function TemplatePicker({
<PickerRadioItem key={template.value} value={template.value}>
{template.logo && (
<div
className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
className="size-4 shrink-0 text-foreground [&_svg]:size-4 *:[svg]:text-foreground!"
dangerouslySetInnerHTML={{
__html: template.logo,
}}

6
apps/v4/app/(create)/components/theme-picker.tsx
View File

@@ -51,8 +51,8 @@ export function ThemePicker({
<Picker>
<PickerTrigger>
<div className="flex flex-col justify-start text-left">
<div className="text-muted-foreground text-xs">Theme</div>
<div className="text-foreground text-sm font-medium">
<div className="text-xs text-muted-foreground">Theme</div>
<div className="text-sm font-medium text-foreground">
{currentTheme?.title}
</div>
</div>
@@ -113,7 +113,7 @@ export function ThemePicker({
)}
<div className="flex flex-col justify-start pointer-coarse:gap-1">
<div>{theme.title}</div>
<div className="text-muted-foreground text-xs pointer-coarse:text-sm">
<div className="text-xs text-muted-foreground pointer-coarse:text-sm">
Match base color
</div>
</div>

14
apps/v4/app/(create)/components/toolbar-controls.tsx
View File

@@ -189,7 +189,7 @@ export function ToolbarControls() {
<FieldLabel
key={template.value}
htmlFor={template.value}
className="has-data-[state=checked]:border-primary/10 rounded-lg!"
className="rounded-lg! has-data-[state=checked]:border-primary/10"
>
<Field className="flex min-w-0 flex-col items-center justify-center gap-2 p-3! text-center *:w-auto!">
<RadioGroupItem
@@ -199,7 +199,7 @@ export function ToolbarControls() {
/>
{template.logo && (
<div
className="text-foreground *:[svg]:text-foreground! size-6 [&_svg]:size-6"
className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
dangerouslySetInnerHTML={{
__html: template.logo,
}}
@@ -211,7 +211,7 @@ export function ToolbarControls() {
))}
</RadioGroup>
</Field>
<FieldLabel className="has-data-[state=checked]:border-primary/10 rounded-lg!">
<FieldLabel className="rounded-lg! has-data-[state=checked]:border-primary/10">
<Field orientation="horizontal">
<FieldContent className="gap-1">
<FieldTitle>Enable RTL</FieldTitle>
@@ -241,10 +241,10 @@ export function ToolbarControls() {
packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
})
}}
className="bg-surface min-w-0 gap-0 overflow-hidden rounded-lg border"
className="min-w-0 gap-0 overflow-hidden rounded-lg border bg-surface"
>
<div className="flex items-center gap-2 p-2">
<TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono group-data-[orientation=horizontal]/tabs:h-8 *:data-[slot=tabs-trigger]:h-7 *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
<TabsList className="h-auto rounded-none bg-transparent p-0 font-mono group-data-[orientation=horizontal]/tabs:h-8 *:data-[slot=tabs-trigger]:h-7 *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none! *:data-[slot=tabs-trigger]:data-[state=active]:border-input">
<TabsTrigger value="pnpm">pnpm</TabsTrigger>
<TabsTrigger value="npm">npm</TabsTrigger>
<TabsTrigger value="yarn">yarn</TabsTrigger>
@@ -274,7 +274,7 @@ export function ToolbarControls() {
{Object.entries(commands).map(([key, cmd]) => {
return (
<TabsContent key={key} value={key}>
<div className="bg-surface border-border/50 text-surface-foreground relative overflow-hidden border-t px-3 py-3">
<div className="relative overflow-hidden border-t border-border/50 bg-surface px-3 py-3 text-surface-foreground">
<div className="no-scrollbar overflow-x-auto">
<code className="font-mono text-sm whitespace-nowrap">
{cmd}
@@ -286,7 +286,7 @@ export function ToolbarControls() {
})}
</Tabs>
</FieldGroup>
<DialogFooter className="bg-muted/50 -mx-6 mt-2 -mb-6 flex flex-col gap-2 border-t p-6 sm:flex-col">
<DialogFooter className="-mx-6 mt-2 -mb-6 flex flex-col gap-2 border-t bg-muted/50 p-6 sm:flex-col">
<Button
size="sm"
onClick={handleCopy}

4
apps/v4/app/(create)/components/welcome-dialog.tsx
View File

@@ -48,11 +48,11 @@ export function WelcomeDialog() {
<DialogTitle className="text-left text-base">
Build your own shadcn/ui
</DialogTitle>
<DialogDescription className="text-foreground text-left leading-relaxed">
<DialogDescription className="text-left leading-relaxed text-foreground">
Customize everything from the ground up. Pick your component
library, font, color scheme, and more.
</DialogDescription>
<DialogDescription className="text-foreground mt-2 text-left leading-relaxed font-medium">
<DialogDescription className="mt-2 text-left leading-relaxed font-medium text-foreground">
Available for Next.js, Vite, TanStack Start, and v0.
</DialogDescription>
</DialogHeader>

14
apps/v4/app/(create)/create/page.tsx
View File

@@ -83,12 +83,12 @@ export default async function CreatePage({
return (
<div
data-slot="layout"
className="section-soft relative z-10 flex min-h-svh flex-col"
className="relative z-10 flex min-h-svh flex-col section-soft"
>
<header className="sticky top-0 z-50 w-full">
<div className="container-wrapper 3xl:fixed:px-0 px-6">
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
<div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
<div className="container-wrapper px-6 3xl:fixed:px-0">
<div className="flex h-(--header-height) items-center **:data-[slot=separator]:h-4! 3xl:fixed:container">
<div className="flex h-(--header-height) items-center **:data-[slot=separator]:h-4! 3xl:fixed:container">
<MobileNav
tree={pageTree}
items={siteConfig.navItems}
@@ -116,8 +116,8 @@ export default async function CreatePage({
<Separator orientation="vertical" className="mr-2 flex" />
</div>
<div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end">
<SiteConfig className="3xl:flex hidden" />
<Separator orientation="vertical" className="3xl:flex hidden" />
<SiteConfig className="hidden 3xl:flex" />
<Separator orientation="vertical" className="hidden 3xl:flex" />
<ModeSwitcher />
<Separator
orientation="vertical"
@@ -134,7 +134,7 @@ export default async function CreatePage({
<SidebarProvider className="flex h-auto min-h-min flex-1 flex-col items-start overflow-hidden px-0">
<div
data-slot="designer"
className="3xl:fixed:container flex w-full flex-1 flex-col gap-2 p-6 pt-1 pb-4 [--sidebar-width:--spacing(40)] sm:gap-2 sm:pt-2 md:flex-row md:pb-6 2xl:gap-6"
className="flex w-full flex-1 flex-col gap-2 p-6 pt-1 pb-4 [--sidebar-width:--spacing(40)] sm:gap-2 sm:pt-2 md:flex-row md:pb-6 2xl:gap-6 3xl:fixed:container"
>
<ItemExplorer base={base.name} items={filteredItems} />
<Preview />

2
apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
View File

@@ -101,7 +101,7 @@ export function ChartRevenue() {
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="text-muted-foreground leading-none">
<div className="leading-none text-muted-foreground">
Showing total visitors for the last 6 months
</div>
</CardFooter>

2
apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
View File

@@ -51,7 +51,7 @@ export function NavUser({
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>

8
apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
View File

@@ -76,7 +76,7 @@ export function ProductsTable({
<div className="hidden items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8 @3xl/page:flex">
<Select defaultValue="all">
<SelectTrigger>
<span className="text-muted-foreground text-sm">Category:</span>
<span className="text-sm text-muted-foreground">Category:</span>
<SelectValue placeholder="Select a product" />
</SelectTrigger>
<SelectContent>
@@ -88,7 +88,7 @@ export function ProductsTable({
</Select>
<Select defaultValue="all">
<SelectTrigger>
<span className="text-muted-foreground text-sm">Price:</span>
<span className="text-sm text-muted-foreground">Price:</span>
<SelectValue placeholder="Select a product" />
</SelectTrigger>
<SelectContent>
@@ -100,7 +100,7 @@ export function ProductsTable({
</Select>
<Select defaultValue="all">
<SelectTrigger>
<span className="text-muted-foreground text-sm">Status:</span>
<span className="text-sm text-muted-foreground">Status:</span>
<SelectValue placeholder="Select a product" />
</SelectTrigger>
<SelectContent>
@@ -184,7 +184,7 @@ export function ProductsTable({
</Table>
</CardContent>
<CardFooter className="flex flex-col items-center justify-between border-t pt-6 @3xl/page:flex-row">
<div className="text-muted-foreground hidden text-sm @3xl/page:block">
<div className="hidden text-sm text-muted-foreground @3xl/page:block">
Showing 1-10 of 100 products
</div>
<Pagination className="mx-0 w-fit">

2
apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
View File

@@ -38,7 +38,7 @@ export function SiteHeader() {
return (
<header
data-slot="site-header"
className="bg-background sticky top-0 z-50 flex w-full items-center border-b"
className="sticky top-0 z-50 flex w-full items-center border-b bg-background"
>
<div className="flex h-(--header-height) w-full items-center gap-2 px-2 pr-4">
<Button

2
apps/v4/app/(examples)/dashboard-03/settings/page.tsx
View File

@@ -489,7 +489,7 @@ function FieldDescription({
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-sm @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
"text-sm text-muted-foreground @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
className
)}
{...props}

4
apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
View File

@@ -158,10 +158,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:!p-1.5"
className="data-[slot=sidebar-menu-button]:p-1.5!"
>
<a href="#">
<IconInnerShadowTop className="!size-5" />
<IconInnerShadowTop className="size-5!" />
<span className="text-base font-semibold">Acme Inc.</span>
</a>
</SidebarMenuButton>

2
apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
View File

@@ -180,7 +180,7 @@ export function ChartAreaInteractive() {
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
>
<ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
<ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>

22
apps/v4/app/(examples)/dashboard/components/data-table.tsx
View File

@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
{...listeners}
variant="ghost"
size="icon"
className="text-muted-foreground size-7 hover:bg-transparent"
className="size-7 text-muted-foreground hover:bg-transparent"
>
<IconGripVertical className="text-muted-foreground size-3" />
<IconGripVertical className="size-3 text-muted-foreground" />
<span className="sr-only">Drag to reorder</span>
</Button>
)
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
header: "Section Type",
cell: ({ row }) => (
<div className="w-32">
<Badge variant="outline" className="text-muted-foreground px-1.5">
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.type}
</Badge>
</div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
accessorKey: "status",
header: "Status",
cell: ({ row }) => (
<Badge variant="outline" className="text-muted-foreground px-1.5">
<Badge variant="outline" className="px-1.5 text-muted-foreground">
{row.original.status === "Done" ? (
<IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
Target
</Label>
<Input
className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.target}
id={`${row.original.id}-target`}
/>
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
Limit
</Label>
<Input
className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
defaultValue={row.original.limit}
id={`${row.original.id}-limit`}
/>
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
size="icon"
>
<IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
<SelectItem value="focus-documents">Focus Documents</SelectItem>
</SelectContent>
</Select>
<TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
<TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
<TabsTrigger value="outline">Outline</TabsTrigger>
<TabsTrigger value="past-performance">
Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
id={sortableId}
>
<Table>
<TableHeader className="bg-muted sticky top-0 z-10">
<TableHeader className="sticky top-0 z-10 bg-muted">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
</DndContext>
</div>
<div className="flex items-center justify-between px-4">
<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
<div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
{table.getFilteredSelectedRowModel().rows.length} of{" "}
{table.getFilteredRowModel().rows.length} row(s) selected.
</div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
return (
<Drawer direction={isMobile ? "bottom" : "right"}>
<DrawerTrigger asChild>
<Button variant="link" className="text-foreground w-fit px-0 text-left">
<Button variant="link" className="w-fit px-0 text-left text-foreground">
{item.header}
</Button>
</DrawerTrigger>

2
apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
View File

@@ -52,7 +52,7 @@ export function NavDocuments({
<DropdownMenuTrigger asChild>
<SidebarMenuAction
showOnHover
className="data-[state=open]:bg-accent rounded-sm"
className="rounded-sm data-[state=open]:bg-accent"
>
<IconDots />
<span className="sr-only">More</span>

2
apps/v4/app/(examples)/dashboard/components/nav-main.tsx
View File

@@ -27,7 +27,7 @@ export function NavMain({
<SidebarMenuItem className="flex items-center gap-2">
<SidebarMenuButton
tooltip="Quick Create"
className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
>
<IconCirclePlusFilled />
<span>Quick Create</span>

4
apps/v4/app/(examples)/dashboard/components/nav-user.tsx
View File

@@ -55,7 +55,7 @@ export function NavUser({
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>
@@ -76,7 +76,7 @@ export function NavUser({
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-medium">{user.name}</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
{user.email}
</span>
</div>

2
apps/v4/app/(examples)/dashboard/components/section-cards.tsx
View File

@@ -12,7 +12,7 @@ import {
export function SectionCards() {
return (
<div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
<div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
<Card className="@container/card">
<CardHeader>
<CardDescription>Total Revenue</CardDescription>

4
apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
View File

@@ -64,10 +64,10 @@ export function ThemeSelector() {
size="sm"
className="justify-start *:data-[slot=select-value]:w-12"
>
<span className="text-muted-foreground hidden sm:block">
<span className="hidden text-muted-foreground sm:block">
Select a theme:
</span>
<span className="text-muted-foreground block sm:hidden">Theme</span>
<span className="block text-muted-foreground sm:hidden">Theme</span>
<SelectValue placeholder="Select a theme" />
</SelectTrigger>
<SelectContent align="end">

2
apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
View File

@@ -95,7 +95,7 @@ export function AppearanceSettings() {
/>
<Field
orientation="horizontal"
className="@min-[28rem]/field-group:border-t-input @min-[28rem]/field-group:border-t"
className="@min-[28rem]/field-group:border-t @min-[28rem]/field-group:border-t-input"
>
<FieldTitle>{mode.name}</FieldTitle>
<RadioGroupItem id={mode.value} value={mode.value} />

10
apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
View File

@@ -202,7 +202,7 @@ export function NotionPromptForm() {
<FieldLabel htmlFor="notion-prompt" className="sr-only">
Prompt
</FieldLabel>
<InputGroup className="bg-background dark:bg-background shadow-none">
<InputGroup className="bg-background shadow-none dark:bg-background">
<InputGroupTextarea
id="notion-prompt"
placeholder="Ask, search, or make anything..."
@@ -255,7 +255,7 @@ export function NotionPromptForm() {
</Command>
</PopoverContent>
</Popover>
<div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
<div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
{mentions.map((mention) => {
const item = SAMPLE_DATA.mentionable.find(
(item) => item.title === mention
@@ -270,7 +270,7 @@ export function NotionPromptForm() {
key={mention}
size="sm"
variant="secondary"
className="rounded-full !pl-2"
className="rounded-full pl-2!"
onClick={() => {
setMentions((prev) => prev.filter((m) => m !== mention))
}}
@@ -319,7 +319,7 @@ export function NotionPromptForm() {
className="[--radius:1.2rem]"
>
<DropdownMenuGroup className="w-72">
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
Get answers about your workspace
</DropdownMenuLabel>
{SAMPLE_DATA.models.map((model) => (
@@ -442,7 +442,7 @@ export function NotionPromptForm() {
<DropdownMenuItem>
<IconPlus /> Connect Apps
</DropdownMenuItem>
<DropdownMenuLabel className="text-muted-foreground text-xs">
<DropdownMenuLabel className="text-xs text-muted-foreground">
We&apos;ll only search in the sources selected here.
</DropdownMenuLabel>
</DropdownMenuGroup>

2
apps/v4/app/(internal)/sink/components/app-sidebar.tsx
View File

@@ -180,7 +180,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<Label htmlFor="search" className="sr-only">
Search
</Label>
<InputGroup className="bg-background h-8 shadow-none">
<InputGroup className="h-8 bg-background shadow-none">
<InputGroupInput
id="search"
placeholder="Search the docs..."

4
apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
View File

@@ -5,7 +5,7 @@ import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
export function AspectRatioDemo() {
return (
<div className="grid w-full max-w-sm items-start gap-4">
<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
<AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
<Image
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"
@@ -13,7 +13,7 @@ export function AspectRatioDemo() {
className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
/>
</AspectRatio>
<AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
<AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
<Image
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
alt="Photo by Drew Beamer"

4
apps/v4/app/(internal)/sink/components/button-group-demo.tsx
View File

@@ -144,7 +144,7 @@ export function ButtonGroupDemo() {
<Button variant="outline">Follow</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="!pl-2">
<Button variant="outline" className="pl-2!">
<ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
@@ -377,7 +377,7 @@ export function ButtonGroupDemo() {
<Button
variant="outline"
asChild
className="text-muted-foreground pointer-events-none px-2"
className="pointer-events-none px-2 text-muted-foreground"
>
<span>1.2K</span>
</Button>

6
apps/v4/app/(internal)/sink/components/calendar-demo.tsx
View File

@@ -14,7 +14,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
export function CalendarDemo() {
return (
<div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
<div className="flex flex-1 flex-col flex-wrap justify-center gap-8 bg-muted p-10 lg:flex-row">
<CalendarSingle />
<CalendarMultiple />
<CalendarRange />
@@ -150,7 +150,7 @@ function CalendarWithTime() {
<div className="flex w-full flex-col gap-2">
<Label htmlFor="time-from">Start Time</Label>
<div className="relative flex w-full items-center gap-2">
<Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
<Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
<Input
id="time-from"
type="time"
@@ -163,7 +163,7 @@ function CalendarWithTime() {
<div className="flex w-full flex-col gap-2">
<Label htmlFor="time-to">End Time</Label>
<div className="relative flex w-full items-center gap-2">
<Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
<Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
<Input
id="time-to"
type="time"

2
apps/v4/app/(internal)/sink/components/card-demo.tsx
View File

@@ -92,7 +92,7 @@ export function CardDemo() {
</ol>
</CardContent>
<CardFooter>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>

2
apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
View File

@@ -83,7 +83,7 @@ export function ChartAreaDemo() {
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
<div className="flex items-center gap-2 leading-none text-muted-foreground">
January - June 2024
</div>
</div>

2
apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
View File

@@ -71,7 +71,7 @@ export function ChartBarDemo() {
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="text-muted-foreground leading-none">
<div className="leading-none text-muted-foreground">
Showing total visitors for the last 6 months
</div>
</CardFooter>

2
apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
View File

@@ -94,7 +94,7 @@ export function ChartBarMixed() {
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="text-muted-foreground leading-none">
<div className="leading-none text-muted-foreground">
Showing total visitors for the last 6 months
</div>
</CardFooter>

2
apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
View File

@@ -89,7 +89,7 @@ export function ChartLineDemo() {
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
<div className="flex items-center gap-2 leading-none text-muted-foreground">
Showing total visitors for the last 6 months
</div>
</div>

6
apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
View File

@@ -14,7 +14,7 @@ export function CheckboxDemo() {
<Checkbox id="terms-2" defaultChecked />
<div className="grid gap-2">
<Label htmlFor="terms-2">Accept terms and conditions</Label>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
By clicking this checkbox, you agree to the terms and conditions.
</p>
</div>
@@ -23,7 +23,7 @@ export function CheckboxDemo() {
<Checkbox id="toggle" disabled />
<Label htmlFor="toggle">Enable notifications</Label>
</div>
<Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
<Label className="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
<Checkbox
id="toggle-2"
defaultChecked
@@ -33,7 +33,7 @@ export function CheckboxDemo() {
<p className="text-sm leading-none font-medium">
Enable notifications
</p>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
You can enable or disable notifications at any time.
</p>
</div>

4
apps/v4/app/(internal)/sink/components/command-demo.tsx
View File

@@ -38,9 +38,9 @@ export function CommandDemo() {
return (
<>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Press{" "}
<kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
<kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
<span className="text-xs">⌘</span>J
</kbd>
</p>

4
apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
View File

@@ -119,7 +119,7 @@ function DataPickerWithDropdowns() {
)}
>
{date ? format(date, "PPP") : <span>Pick a date</span>}
<CalendarIcon className="text-muted-foreground ml-auto" />
<CalendarIcon className="ml-auto text-muted-foreground" />
</Button>
</DrawerTrigger>
<DrawerContent>
@@ -153,7 +153,7 @@ function DataPickerWithDropdowns() {
)}
>
{date ? format(date, "PPP") : <span>Pick a date</span>}
<CalendarIcon className="text-muted-foreground ml-auto" />
<CalendarIcon className="ml-auto text-muted-foreground" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">

2
apps/v4/app/(internal)/sink/components/drawer-demo.tsx
View File

@@ -102,7 +102,7 @@ function DrawerBottom() {
<div className="text-7xl font-bold tracking-tighter">
{goal}
</div>
<div className="text-muted-foreground text-[0.70rem] uppercase">
<div className="text-[0.70rem] text-muted-foreground uppercase">
Calories/day
</div>
</div>

8
apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
View File

@@ -222,7 +222,7 @@ function DropdownMenuWithAvatar() {
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">shadcn</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
shadcn@example.com
</span>
</div>
@@ -232,7 +232,7 @@ function DropdownMenuWithAvatar() {
hugeicons="ChevronUpDownIcon"
phosphor="CaretUpDownIcon"
remixicon="RiExpandUpDownLine"
className="text-muted-foreground ml-auto"
className="ml-auto text-muted-foreground"
/>
</Button>
</DropdownMenuTrigger>
@@ -248,7 +248,7 @@ function DropdownMenuWithAvatar() {
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">shadcn</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
shadcn@example.com
</span>
</div>
@@ -348,7 +348,7 @@ function DropdownMenuAvatarOnly() {
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">maxleiter</span>
<span className="text-muted-foreground truncate text-xs">
<span className="truncate text-xs text-muted-foreground">
maxleiter@example.com
</span>
</div>

6
apps/v4/app/(internal)/sink/components/empty-demo.tsx
View File

@@ -59,7 +59,7 @@ export function EmptyDemo() {
</Button>
</EmptyContent>
</Empty>
<Empty className="bg-muted min-h-[80svh]">
<Empty className="min-h-[80svh] bg-muted">
<EmptyHeader>
<EmptyTitle>No results found</EmptyTitle>
<EmptyDescription>
@@ -114,7 +114,7 @@ export function EmptyDemo() {
</Button>
</EmptyContent>
</Empty>
<div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
<div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
<Card className="max-w-sm">
<CardContent>
<Empty className="p-4">
@@ -143,7 +143,7 @@ export function EmptyDemo() {
</CardContent>
</Card>
</div>
<div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
<div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
<Card className="max-w-sm">
<CardContent>
<Empty className="p-4">

34
apps/v4/app/(internal)/sink/components/field-demo.tsx
View File

@@ -91,7 +91,7 @@ import {
export function FieldDemo() {
return (
<div className="@container w-full">
<div className="bg-muted grid gap-4 p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
<div className="grid gap-4 bg-muted p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
<div className="flex flex-col gap-6">
<BasicFields />
<PrivacySettings />
@@ -599,8 +599,8 @@ function PrivacySettings() {
id="everyone-f8k"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="followers-s7m">
@@ -616,8 +616,8 @@ function PrivacySettings() {
id="followers-s7m"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="custom-q3r">
@@ -633,8 +633,8 @@ function PrivacySettings() {
id="custom-q3r"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
</RadioGroup>
@@ -699,7 +699,7 @@ function PrivacySettings() {
<RadioGroup>
<FieldLabel htmlFor="everyone-3-k4p">
<Field orientation="horizontal">
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
<div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
<IconWorld className="size-4" />
</div>
<FieldContent>
@@ -713,13 +713,13 @@ function PrivacySettings() {
id="everyone-3-k4p"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="followers-3-m7j">
<Field orientation="horizontal">
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
<div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
<IconUsers className="size-4" />
</div>
<FieldContent>
@@ -733,13 +733,13 @@ function PrivacySettings() {
id="followers-3-m7j"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
<FieldLabel htmlFor="custom-3-r9w">
<Field orientation="horizontal">
<div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
<div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
<IconPlus className="size-4" />
</div>
<FieldContent>
@@ -753,8 +753,8 @@ function PrivacySettings() {
id="custom-3-r9w"
className="sr-only"
/>
<IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
<IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
<IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
</Field>
</FieldLabel>
</RadioGroup>
@@ -1034,7 +1034,7 @@ function ShippingMethods() {
</CardContent>
</Card>
<form>
<FieldGroup className="bg-background gap-6 rounded-lg border p-6">
<FieldGroup className="gap-6 rounded-lg border bg-background p-6">
<FieldSet>
<FieldLegend>GPU Type</FieldLegend>
<FieldDescription>

4
apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
View File

@@ -30,8 +30,8 @@ export function HoverCardDemo() {
The React Framework – created and maintained by @vercel.
</p>
<div className="mt-1 flex items-center gap-2">
<CalendarIcon className="text-muted-foreground size-4" />{" "}
<span className="text-muted-foreground text-xs">
<CalendarIcon className="size-4 text-muted-foreground" />{" "}
<span className="text-xs text-muted-foreground">
Joined December 2021
</span>
</div>

6
apps/v4/app/(internal)/sink/components/input-group-demo.tsx
View File

@@ -131,7 +131,7 @@ export function InputGroupDemo() {
<InputGroup>
<InputGroupInput id="input-icon-right-08" />
<InputGroupAddon align="inline-end">
<IconLoader2 className="text-muted-foreground animate-spin" />
<IconLoader2 className="animate-spin text-muted-foreground" />
</InputGroupAddon>
</InputGroup>
</Field>
@@ -353,7 +353,7 @@ export function InputGroupDemo() {
<InputGroupInput id="input-addon-20" />
<InputGroupAddon align="block-start">
<InputGroupText>First Name</InputGroupText>
<IconInfoCircle className="text-muted-foreground ml-auto" />
<IconInfoCircle className="ml-auto text-muted-foreground" />
</InputGroupAddon>
</InputGroup>
</Field>
@@ -363,7 +363,7 @@ export function InputGroupDemo() {
<InputGroupInput id="input-addon-21" />
<InputGroupAddon align="block-end">
<InputGroupText>20/240 characters</InputGroupText>
<IconInfoCircle className="text-muted-foreground ml-auto" />
<IconInfoCircle className="ml-auto text-muted-foreground" />
</InputGroupAddon>
</InputGroup>
</Field>

Some files were not shown because too many files have changed in this diff Show More