rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-27 22:54:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(v4): responsive for the demo (#6803)

Browse Source 
* fix(v4): responsive

* fix: type

* fix(v4): remove the login link
This commit is contained in:
shadcn
2025-02-28 13:31:06 +04:00
committed by GitHub
parent 99b0a5ac90
commit f90f5148eb
19 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,7 +49,7 @@ import { TooltipDemo } from "@/components/tooltip-demo"
export default function SinkPage() {
return (
<div className="grid flex-1 gap-4 p-4">
<div className="@container grid flex-1 gap-4 p-4">
<ComponentWrapper name="chart" className="w-full">
<ChartDemo />
</ComponentWrapper>
@@ -83,7 +83,7 @@ export default function SinkPage() {
<ComponentWrapper name="card">
<CardDemo />
</ComponentWrapper>
<ComponentWrapper name="carousel" className="hidden md:flex">
<ComponentWrapper name="carousel">
<CarouselDemo />
</ComponentWrapper>
<ComponentWrapper name="checkbox">

2
apps/v4/components/avatar-demo.tsx
View File

@@ -6,7 +6,7 @@ import {
export function AvatarDemo() {
return (
<div className="flex flex-col items-center gap-4 md:flex-row">
<div className="flex flex-row flex-wrap items-center gap-4">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>

4
apps/v4/components/badge-demo.tsx
View File

@@ -5,7 +5,7 @@ import { Badge } from "@/registry/new-york-v4/ui/badge"
export function BadgeDemo() {
return (
<div className="flex flex-col items-center gap-2">
<div className="flex w-full flex-col gap-2 md:flex-row">
<div className="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
@@ -34,7 +34,7 @@ export function BadgeDemo() {
20+
</Badge>
</div>
<div className="flex w-full flex-col gap-2 md:flex-row">
<div className="flex w-full flex-wrap gap-2">
<Badge asChild>
<a href="#">
Link <ArrowRightIcon />

6
apps/v4/components/button-demo.tsx
View File

@@ -5,7 +5,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"
export function ButtonDemo() {
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center gap-2 md:flex-row">
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button>Button</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
@@ -23,7 +23,7 @@ export function ButtonDemo() {
Please wait
</Button>
</div>
<div className="flex flex-col items-center gap-2 md:flex-row">
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button size="sm">Small</Button>
<Button variant="outline" size="sm">
Outline
@@ -51,7 +51,7 @@ export function ButtonDemo() {
Please wait
</Button>
</div>
<div className="flex flex-col flex-wrap items-center gap-2 md:flex-row">
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button size="lg">Large</Button>
<Button variant="outline" size="lg">
Outline

4
apps/v4/components/calendar-demo.tsx
View File

@@ -18,7 +18,7 @@ export function CalendarDemo() {
})
return (
<div className="flex flex-col flex-wrap items-start gap-2 md:flex-row">
<div className="flex flex-col flex-wrap items-start gap-2 @md:flex-row">
<Calendar
mode="single"
selected={date}
@@ -40,7 +40,7 @@ export function CalendarDemo() {
selected={range}
onSelect={setRange}
numberOfMonths={3}
className="rounded-md border shadow-sm [&>div]:gap-5"
className="hidden rounded-md border shadow-sm @4xl:flex [&>div]:gap-5"
/>
</div>
)

3
apps/v4/components/carousel-demo.tsx
View File

@@ -11,7 +11,7 @@ import {
export function CarouselDemo() {
return (
<div className="w-full flex-col items-center gap-4 md:flex">
<div className="hidden w-full flex-col items-center gap-4 @4xl:flex">
<Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
<CarouselContent>
{Array.from({ length: 5 }).map((_, index) => (
@@ -29,7 +29,6 @@ export function CarouselDemo() {
<CarouselPrevious />
<CarouselNext />
</Carousel>
<Carousel
className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex"
opts={{

6
apps/v4/components/chart-demo.tsx
View File

@@ -1,13 +1,17 @@
import { ChartAreaDemo } from "@/components/chart-area-demo"
import { ChartBarDemo } from "@/components/chart-bar-demo"
import { ChartLineDemo } from "@/components/chart-line-demo"
import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
export function ChartDemo() {
return (
<div className="flex w-full max-w-screen-xl flex-col flex-wrap gap-4 *:data-[slot=card]:flex-1 md:flex-row">
<div className="grid w-full max-w-screen-2xl gap-4 *:data-[slot=card]:flex-1 @2xl:grid-cols-2 @6xl:grid-cols-3">
<ChartAreaDemo />
<ChartBarDemo />
<ChartBarMixed />
<div className="@6xl:hidden">
<ChartLineDemo />
</div>
</div>
)
}

2
apps/v4/components/combobox-demo.tsx
View File

@@ -112,7 +112,7 @@ type Timezone = (typeof timezones)[number]
export function ComboboxDemo() {
return (
<div className="flex w-full flex-col items-start gap-4 md:flex-row">
<div className="flex w-full flex-wrap items-start gap-4">
<FrameworkCombobox frameworks={[...frameworks]} />
<UserCombobox users={[...users]} selectedUserId={users[0].id} />
<TimezoneCombobox

2
apps/v4/components/drawer-demo.tsx
View File

@@ -60,7 +60,7 @@ const data = [
export function DrawerDemo() {
return (
<div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
<div className="flex flex-wrap items-start gap-4">
<DrawerBottom />
<DrawerScrollableContent />
<DrawerDirections />

2
apps/v4/components/dropdown-menu-demo.tsx
View File

@@ -43,7 +43,7 @@ import {
export function DropdownMenuDemo() {
return (
<div className="flex flex-col items-center gap-4 md:flex-row">
<div className="flex flex-wrap items-start gap-4">
<DropdownMenuSimple />
<DropdownMenuCheckboxes />
<DropdownMenuRadioGroupDemo />

2
apps/v4/components/navigation-menu-demo.tsx
View File

@@ -54,7 +54,7 @@ const components: { title: string; href: string; description: string }[] = [
export function NavigationMenuDemo() {
return (
<div className="hidden w-full flex-col items-center justify-center gap-6 md:flex">
<div className="hidden w-full flex-col items-center justify-center gap-6 @xl:flex">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>

2
apps/v4/components/select-demo.tsx
View File

@@ -18,7 +18,7 @@ import {
export function SelectDemo() {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-wrap items-start gap-4">
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />

6
apps/v4/components/skeleton-demo.tsx
View File

@@ -3,7 +3,7 @@ import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
export function SkeletonDemo() {
return (
<div className="flex w-full max-w-3xl flex-col gap-6">
<div className="flex w-full flex-wrap items-start gap-4">
<div className="flex items-center gap-4">
<Skeleton className="size-10 shrink-0 rounded-full" />
<div className="grid gap-2">
@@ -11,9 +11,9 @@ export function SkeletonDemo() {
<Skeleton className="h-4 w-[100px]" />
</div>
</div>
<div className="flex w-full flex-col gap-4 md:flex-row">
<div className="flex w-full flex-wrap items-start gap-4">
{Array.from({ length: 3 }).map((_, index) => (
<Card key={index} className="w-full">
<Card key={index} className="w-full @md:w-auto @md:min-w-sm">
<CardHeader>
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-4 w-1/2" />

2
apps/v4/components/toggle-group-demo.tsx
View File

@@ -7,7 +7,7 @@ import {
export function ToggleGroupDemo() {
return (
<div className="flex flex-col items-center gap-6 md:flex-row">
<div className="flex flex-wrap items-start gap-4">
<ToggleGroup type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<BoldIcon />

2
apps/v4/components/tooltip-demo.tsx
View File

@@ -9,7 +9,7 @@ import {
export function TooltipDemo() {
return (
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex flex-wrap items-start gap-4">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Hover</Button>

2
apps/v4/registry/new-york-v4/ui/toggle.tsx
View File

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const toggleVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
{
variants: {
variant: {

2
apps/www/public/r/styles/new-york-v4/form.json
View File

@@ -16,7 +16,7 @@
"files": [
{
"path": "registry/new-york-v4/ui/form.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState } = useFormContext()\n const formState = useFormState({ name: fieldContext.name })\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n data-slot=\"form-item\"\n className={cn(\"grid gap-2\", className)}\n {...props}\n />\n </FormItemContext.Provider>\n )\n}\n\nfunction FormLabel({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n data-slot=\"form-label\"\n data-error={!!error}\n className={cn(\"data-[error=true]:text-destructive-foreground\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n data-slot=\"form-control\"\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n data-slot=\"form-description\"\n id={formDescriptionId}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message) : props.children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n data-slot=\"form-message\"\n id={formMessageId}\n className={cn(\"text-destructive-foreground text-sm\", className)}\n {...props}\n >\n {body}\n </p>\n )\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n Controller,\n ControllerProps,\n FieldPath,\n FieldValues,\n FormProvider,\n useFormContext,\n useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n)\n\nconst FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n )\n}\n\nconst useFormField = () => {\n const fieldContext = React.useContext(FormFieldContext)\n const itemContext = React.useContext(FormItemContext)\n const { getFieldState } = useFormContext()\n const formState = useFormState({ name: fieldContext.name })\n const fieldState = getFieldState(fieldContext.name, formState)\n\n if (!fieldContext) {\n throw new Error(\"useFormField should be used within <FormField>\")\n }\n\n const { id } = itemContext\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n }\n}\n\ntype FormItemContextValue = {\n id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n const id = React.useId()\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div\n data-slot=\"form-item\"\n className={cn(\"grid gap-2\", className)}\n {...props}\n />\n </FormItemContext.Provider>\n )\n}\n\nfunction FormLabel({\n className,\n ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { error, formItemId } = useFormField()\n\n return (\n <Label\n data-slot=\"form-label\"\n data-error={!!error}\n className={cn(\"data-[error=true]:text-destructive-foreground\", className)}\n htmlFor={formItemId}\n {...props}\n />\n )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n return (\n <Slot\n data-slot=\"form-control\"\n id={formItemId}\n aria-describedby={\n !error\n ? `${formDescriptionId}`\n : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={!!error}\n {...props}\n />\n )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n const { formDescriptionId } = useFormField()\n\n return (\n <p\n data-slot=\"form-description\"\n id={formDescriptionId}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n const { error, formMessageId } = useFormField()\n const body = error ? String(error?.message ?? \"\") : props.children\n\n if (!body) {\n return null\n }\n\n return (\n <p\n data-slot=\"form-message\"\n id={formMessageId}\n className={cn(\"text-destructive-foreground text-sm\", className)}\n {...props}\n >\n {body}\n </p>\n )\n}\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n}\n",
"type": "registry:ui"
}
]

2
apps/www/public/r/styles/new-york-v4/toggle.json
View File

@@ -8,7 +8,7 @@
"files": [
{
"path": "registry/new-york-v4/ui/toggle.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 px-2 min-w-9\",\n sm: \"h-8 px-1.5 min-w-8\",\n lg: \"h-10 px-2.5 min-w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Toggle({\n className,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <TogglePrimitive.Root\n data-slot=\"toggle\"\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Toggle, toggleVariants }\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 px-2 min-w-9\",\n sm: \"h-8 px-1.5 min-w-8\",\n lg: \"h-10 px-2.5 min-w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Toggle({\n className,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n VariantProps<typeof toggleVariants>) {\n return (\n <TogglePrimitive.Root\n data-slot=\"toggle\"\n className={cn(toggleVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Toggle, toggleVariants }\n",
"type": "registry:ui"
}
]

1
apps/www/registry/default/ui/sidebar.tsx
View File

@@ -15,6 +15,7 @@ import {
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/registry/default/ui/sheet"
import { Skeleton } from "@/registry/default/ui/skeleton"
import {