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

fix

Browse Source
This commit is contained in:
shadcn
2026-01-20 12:41:52 +04:00
parent 818c060efc
commit f337ccef13
22 changed files with 62 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/v4/components/component-preview-tabs.tsx
View File

@@ -3,6 +3,7 @@
import * as React from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/registry/new-york-v4/ui/button"
export function ComponentPreviewTabs({
className,
@@ -21,6 +22,8 @@ export function ComponentPreviewTabs({
component: React.ReactNode
source: React.ReactNode
}) {
const [isMobileCodeVisible, setIsMobileCodeVisible] = React.useState(false)
return (
<div
className={cn(
@@ -43,9 +46,32 @@ export function ComponentPreviewTabs({
{!hideCode && (
<div
data-slot="code"
className="overflow-hidden [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
data-mobile-code-visible={isMobileCodeVisible}
className="relative overflow-hidden data-[mobile-code-visible=false]:max-h-24 md:max-h-none data-[mobile-code-visible=false]:md:max-h-none [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
>
{source}
{!isMobileCodeVisible && (
<div className="absolute inset-0 flex items-center justify-center md:hidden">
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
}}
/>
<Button
type="button"
size="sm"
variant="outline"
className="bg-background text-foreground dark:bg-background dark:text-foreground relative z-10"
onClick={() => {
setIsMobileCodeVisible(true)
}}
>
View Code
</Button>
</div>
)}
</div>
)}
</div>

4
apps/v4/components/component-preview.tsx
View File

@@ -29,14 +29,14 @@ export function ComponentPreview({
return (
<div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-xl border md:-mx-1">
<Image
src={`/r/styles/${styleName}/${name}-light.png`}
src={`/r/styles/new-york-v4/${name}-light.png`}
alt={name}
width={1440}
height={900}
className="bg-background absolute top-0 left-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
/>
<Image
src={`/r/styles/${styleName}/${name}-dark.png`}
src={`/r/styles/new-york-v4/${name}-dark.png`}
alt={name}
width={1440}
height={900}

2
apps/v4/components/mobile-nav.tsx
View File

@@ -20,7 +20,7 @@ const TOP_LEVEL_SECTIONS = [
{ name: "Introduction", href: "/docs" },
{
name: "Components",
href: "/docs/components/radix",
href: "/docs/components",
},
{
name: "Installation",

14
apps/v4/content/docs/components/base/aspect-ratio.mdx
View File

@@ -5,11 +5,7 @@ base: base
component: true
---
<ComponentPreview
styleName="base-nova"
name="aspect-ratio-demo"
previewClassName="h-96"
/>
<ComponentPreview name="aspect-ratio-demo" styleName="base-nova" />
## Installation
@@ -71,11 +67,7 @@ import { AspectRatio } from "@/components/ui/aspect-ratio"
A square aspect ratio component using the `ratio={1 / 1}` prop. This is useful for displaying images in a square format.
<ComponentPreview
styleName="base-nova"
name="aspect-ratio-square"
previewClassName="h-96"
/>
<ComponentPreview name="aspect-ratio-square" styleName="base-nova" />
### Portrait
@@ -97,3 +89,5 @@ The `AspectRatio` component displays content within a desired ratio.
| ----------- | -------- | ------- | -------- |
| `ratio` | `number` | - | Yes |
| `className` | `string` | - | No |
For more information, see the [Base UI documentation](https://base-ui.com/react/components/aspect-ratio#api-reference).

6
apps/v4/content/docs/components/base/breadcrumb.mdx
View File

@@ -104,7 +104,11 @@ You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropd
We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
<ComponentPreview styleName="base-nova" name="breadcrumb-ellipsis" />
<ComponentPreview
styleName="base-nova"
name="breadcrumb-ellipsis"
previewClassName="p-2"
/>
### Link component

4
apps/v4/content/docs/components/base/calendar.mdx
View File

@@ -92,7 +92,7 @@ The `Calendar` component is built on top of [React DayPicker](https://react-day-
## Date Picker
You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/base/date-picker) page for more information.
## Persian / Hijri / Jalali Calendar
@@ -158,7 +158,7 @@ Use the `mode="range"` prop to enable range selection.
<ComponentPreview
styleName="base-nova"
name="calendar-range"
previewClassName="h-96"
previewClassName="h-[36rem] md:h-96"
/>
### Month and Year Selector

1
apps/v4/content/docs/components/base/typography.mdx
View File

@@ -10,7 +10,6 @@ We do not ship any typography styles by default. This page is an example of how
<ComponentPreview
styleName="base-nova"
name="typography-demo"
description="A collection of typographic elements."
className="[&_.preview]:!h-auto"
hideCode
/>

6
apps/v4/content/docs/components/radix/accordion.mdx
View File

@@ -101,7 +101,7 @@ Use `type="multiple"` to allow multiple items to be open at the same time.
name="accordion-multiple"
styleName="radix-nova"
align="start"
previewClassName="*:data-[slot=accordion]:max-w-sm h-[450px]"
previewClassName="*:data-[slot=accordion]:max-w-sm h-[36rem] md:h-[30rem]"
/>
### Disabled
@@ -123,7 +123,7 @@ Add `border` to the `Accordion` and `border-b last:border-b-0` to the `Accordion
name="accordion-borders"
styleName="radix-nova"
align="start"
previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
previewClassName="*:data-[slot=accordion]:max-w-sm h-96 md:h-80"
/>
### Card
@@ -134,7 +134,7 @@ Wrap the `Accordion` in a `Card` component.
name="accordion-card"
styleName="radix-nova"
align="start"
previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
previewClassName="*:data-[slot=accordion]:max-w-sm h-[32rem] md:h-[28rem]"
/>
## API Reference

12
apps/v4/content/docs/components/radix/aspect-ratio.mdx
View File

@@ -8,11 +8,7 @@ links:
api: https://www.radix-ui.com/primitives/docs/components/aspect-ratio#api-reference
---
<ComponentPreview
name="aspect-ratio-demo"
styleName="radix-nova"
previewClassName="h-96"
/>
<ComponentPreview name="aspect-ratio-demo" styleName="radix-nova" />
## Installation
@@ -74,11 +70,7 @@ import { AspectRatio } from "@/components/ui/aspect-ratio"
A square aspect ratio component using the `ratio={1 / 1}` prop. This is useful for displaying images in a square format.
<ComponentPreview
name="aspect-ratio-square"
styleName="radix-nova"
previewClassName="h-96"
/>
<ComponentPreview name="aspect-ratio-square" styleName="radix-nova" />
### Portrait

6
apps/v4/content/docs/components/radix/breadcrumb.mdx
View File

@@ -98,7 +98,11 @@ You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropd
We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
<ComponentPreview styleName="radix-nova" name="breadcrumb-ellipsis" />
<ComponentPreview
styleName="radix-nova"
name="breadcrumb-ellipsis"
previewClassName="p-2"
/>
### Link component

2
apps/v4/content/docs/components/radix/calendar.mdx
View File

@@ -158,7 +158,7 @@ Use the `mode="range"` prop to enable range selection.
<ComponentPreview
styleName="radix-nova"
name="calendar-range"
previewClassName="h-96"
previewClassName="h-[36rem] md:h-96"
/>
### Month and Year Selector

2
apps/v4/content/docs/components/radix/input-otp.mdx
View File

@@ -139,7 +139,7 @@ Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.
<ComponentPreview
styleName="radix-nova"
name="input-otp-form"
previewClassName="h-[30rem ]"
previewClassName="h-[30rem]"
/>
## API Reference

1
apps/v4/content/docs/components/radix/typography.mdx
View File

@@ -10,7 +10,6 @@ We do not ship any typography styles by default. This page is an example of how
<ComponentPreview
styleName="radix-nova"
name="typography-demo"
description="A collection of typographic elements."
className="[&_.preview]:!h-auto"
hideCode
/>

2
apps/v4/examples/base/breadcrumb-dropdown.tsx
View File

@@ -32,7 +32,7 @@ export function BreadcrumbDropdown() {
render={<button className="flex items-center gap-1" />}
>
Components
<ChevronDownIcon data-icon="inline-end" className="size-3.5" />
<ChevronDownIcon data-icon="inline-end" />
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>

3
apps/v4/examples/base/drawer-demo.tsx
View File

@@ -113,8 +113,7 @@ export function DrawerDemo() {
dataKey="goal"
style={
{
fill: "hsl(var(--foreground))",
opacity: 0.9,
fill: "var(--chart-1)",
} as React.CSSProperties
}
/>

2
apps/v4/examples/radix/breadcrumb-dropdown.tsx
View File

@@ -33,7 +33,7 @@ export function BreadcrumbDropdown() {
<DropdownMenuTrigger asChild>
<button className="flex items-center gap-1">
Components
<ChevronDownIcon />
<ChevronDownIcon className="size-3.5" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">

3
apps/v4/examples/radix/drawer-demo.tsx
View File

@@ -113,8 +113,7 @@ export function DrawerDemo() {
dataKey="goal"
style={
{
fill: "hsl(var(--foreground))",
opacity: 0.9,
fill: "var(--chart-1)",
} as React.CSSProperties
}
/>

2
apps/v4/public/r/styles/base-lyra/navigation-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-maia/navigation-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-mira/navigation-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-nova/navigation-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-vega/navigation-menu.json
View File

File diff suppressed because one or more lines are too long