rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-11 09:51:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
shadcn
2026-04-10 05:37:42 +04:00
parent 429e258322
commit 56567ae21a
43 changed files with 184 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/v4/app/(app)/create/components/design-system-provider.tsx
View File

@@ -130,7 +130,7 @@ export function DesignSystemProvider({
useIframeMessageListener("design-system-params", handleDesignSystemMessage)
React.useEffect(() => {
if (style === "lyra" && radius !== "none") {
if (style === "lyra" || (style === "sera" && radius !== "none")) {
setSearchParams({ radius: "none" })
}
}, [style, radius, setSearchParams])

12
apps/v4/registry/bases/base/blocks/preview-02/cards/contribution-history.tsx
View File

@@ -24,6 +24,7 @@ import {
ItemContent,
ItemDescription,
} from "@/registry/bases/base/ui/item"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
const chartData = [
{ month: "Dec", amount: 800 },
@@ -42,6 +43,9 @@ const chartConfig = {
} satisfies ChartConfig
export function ContributionHistory() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -71,13 +75,13 @@ export function ContributionHistory() {
<Bar
dataKey="amount"
fill="var(--color-amount)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
maxBarSize={40}
/>
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-4">
<CardContent>
<div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
<Item variant="muted" className="flex-col items-stretch">
<ItemContent className="gap-1">
@@ -106,7 +110,9 @@ export function ContributionHistory() {
</ItemContent>
</Item>
</div>
<Button className="w-full">View Full Report</Button>
</CardContent>
<CardFooter>
<Button className="style-sera:w-full">View Full Report</Button>
</CardFooter>
</Card>
)

7
apps/v4/registry/bases/base/blocks/preview-02/cards/dividend-income.tsx
View File

@@ -2,6 +2,8 @@
import { Bar, BarChart, XAxis } from "recharts"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
import { Button } from "@/registry/bases/base/ui/button"
import {
Card,
@@ -81,6 +83,9 @@ const miniChartConfig = {
} satisfies ChartConfig
export function DividendIncome() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -123,7 +128,7 @@ export function DividendIncome() {
<Bar
dataKey="value"
fill="var(--color-value)"
radius={[3, 3, 0, 0]}
radius={isRounded ? [3, 3, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

2
apps/v4/registry/bases/base/blocks/preview-02/cards/index-investing.tsx
View File

@@ -19,7 +19,7 @@ export function IndexInvesting() {
</CardDescription>
</CardHeader>
<CardContent>
<CardDescription className="mt-3 text-sm leading-relaxed">
<CardDescription className="mt-3 text-sm leading-relaxed style-sera:mt-0">
<a
href="#"
className="underline underline-offset-4 hover:text-primary"

7
apps/v4/registry/bases/base/blocks/preview-02/cards/power-usage.tsx
View File

@@ -2,6 +2,8 @@
import { Bar, BarChart, XAxis } from "recharts"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
import {
Card,
CardContent,
@@ -38,6 +40,9 @@ const chartConfig = {
} satisfies ChartConfig
export function PowerUsage() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -64,7 +69,7 @@ export function PowerUsage() {
<Bar
dataKey="usage"
fill="var(--color-usage)"
radius={[4, 4, 0, 0]}
radius={isRounded ? [4, 4, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

4
apps/v4/registry/bases/base/blocks/preview-02/cards/preferences.tsx
View File

@@ -73,7 +73,7 @@ export function Preferences() {
</SelectContent>
</Select>
</Field>
<FieldSeparator className="-my-4" />
<FieldSeparator className="-my-4 style-sera:hidden" />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="public-statistics">
@@ -86,7 +86,7 @@ export function Preferences() {
</FieldContent>
<Switch id="public-statistics" defaultChecked />
</Field>
<FieldSeparator className="-my-4" />
<FieldSeparator className="-my-4 style-sera:hidden" />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="email-notifications">

11
apps/v4/registry/bases/base/blocks/preview-02/cards/receiving-method.tsx
View File

@@ -18,6 +18,7 @@ import {
FieldLabel,
FieldLegend,
FieldSet,
FieldTitle,
} from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import {
@@ -59,15 +60,13 @@ export function ReceivingMethod() {
<FieldLegend variant="label">Receiving Method</FieldLegend>
<RadioGroup
defaultValue="bank"
className="grid grid-cols-1 items-start gap-3 md:grid-cols-2"
className="grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1"
>
<FieldLabel htmlFor="method-bank">
<Field orientation="horizontal" className="pb-2.5">
<RadioGroupItem value="bank" id="method-bank" />
<FieldContent>
<FieldDescription className="font-medium text-foreground">
Bank Transfer
</FieldDescription>
<FieldTitle>Bank Transfer</FieldTitle>
<FieldDescription>SWIFT / IBAN</FieldDescription>
</FieldContent>
</Field>
@@ -76,9 +75,7 @@ export function ReceivingMethod() {
<Field orientation="horizontal" className="pb-2.5">
<RadioGroupItem value="paypal" id="method-paypal" />
<FieldContent>
<FieldDescription className="font-medium text-foreground">
PayPal
</FieldDescription>
<FieldTitle>PayPal</FieldTitle>
<FieldDescription className="line-clamp-1">
Instant Payout
</FieldDescription>

6
apps/v4/registry/bases/base/blocks/preview-02/cards/social-links.tsx
View File

@@ -96,9 +96,9 @@ export function SocialLinks() {
</Field>
</FieldGroup>
</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="secondary">Discard</Button>
<Button>Save Changes</Button>
<CardFooter className="justify-end gap-2 style-sera:justify-center">
<Button variant="secondary" className="style-sera:flex-1">Discard</Button>
<Button className="style-sera:flex-1">Save Changes</Button>
</CardFooter>
</Card>
)

2
apps/v4/registry/bases/base/blocks/preview-02/cards/stock-performance.tsx
View File

@@ -103,7 +103,7 @@ export function StockPerformance() {
</Combobox>
</Field>
</FieldGroup>
<Separator />
<Separator className="style-sera:hidden" />
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<AreaChart
accessibilityLayer

2
apps/v4/registry/bases/base/blocks/preview-02/cards/upcoming-payments.tsx
View File

@@ -37,7 +37,7 @@ export function UpcomingPayments() {
mode="single"
selected={date}
onSelect={setDate}
className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)]"
className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
/>
</Item>
<ItemGroup className="w-full">

4
apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
View File

@@ -95,8 +95,8 @@ export function ActivateAgentDialog() {
</Alert>
</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="outline">Cancel</Button>
<Button>Enable with $100 credits</Button>
<Button variant="outline" className="style-sera:hidden">Cancel</Button>
<Button className="style-sera:w-full">Enable with $100 credits</Button>
</CardFooter>
</Card>
)

8
apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
View File

@@ -3,6 +3,7 @@
import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
import { Button } from "@/registry/bases/base/ui/button"
import {
Card,
@@ -49,6 +50,9 @@ const desktopDelta = Math.round(
const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
export function BarChartCard() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -84,12 +88,12 @@ export function BarChartCard() {
<Bar
dataKey="desktop"
fill="var(--color-desktop)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
/>
<Bar
dataKey="mobile"
fill="var(--color-mobile)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

2
apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
View File

@@ -56,7 +56,7 @@ export function ContributionsActivity() {
</form>
</CardContent>
<CardFooter>
<Button form="contributions-activity">Save Changes</Button>
<Button form="contributions-activity" className="style-sera:w-full">Save Changes</Button>
</CardFooter>
</Card>
)

2
apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
View File

@@ -57,7 +57,7 @@ export function FeedbackForm() {
</form>
</CardContent>
<CardFooter>
<Button type="submit" form="feedback-form">
<Button type="submit" form="feedback-form" className="style-sera:w-full">
Submit
</Button>
</CardFooter>

2
apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
View File

@@ -70,7 +70,7 @@ export function GithubProfile() {
</form>
</CardContent>
<CardFooter>
<Button form="profile">Save Profile</Button>
<Button form="profile" className="style-sera:w-full">Save Profile</Button>
</CardFooter>
</Card>
)

2
apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
View File

@@ -128,7 +128,7 @@ export function IconPreviewGrid() {
{PREVIEW_ICONS.map((icon, index) => (
<div
key={index}
className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4"
className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4 style-sera:rounded-none"
>
<IconPlaceholder
lucide={icon.lucide}

6
apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
View File

@@ -98,9 +98,9 @@ export function ReportBug() {
</FieldGroup>
</CardContent>
<CardFooter>
<Field orientation="horizontal" className="justify-end">
<Button variant="outline">Attach File</Button>
<Button>Submit Bug</Button>
<Field orientation="horizontal" className="justify-end style-sera:justify-center">
<Button variant="outline" className="style-sera:flex-1">Attach File</Button>
<Button className="style-sera:flex-1">Submit Bug</Button>
</Field>
</CardFooter>
</Card>

6
apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
View File

@@ -29,14 +29,14 @@ export function StyleOverview() {
<Card>
<CardContent className="flex flex-col gap-6 style-lyra:gap-4 style-mira:gap-4">
<div className="flex flex-col gap-1">
<div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg">
<div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg style-sera:text-lg style-sera:tracking-wide style-sera:uppercase">
{currentStyle?.title} -{" "}
{currentFontHeading?.name &&
currentFontHeading.name !== currentFont?.name
? currentFontHeading.name
: currentFont?.name}
</div>
<div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm">
<div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm style-sera:text-sm style-sera:leading-relaxed">
Designers love packing quirky glyphs into test phrases. This is a
preview of the typography styles.
</div>
@@ -61,7 +61,7 @@ export function StyleOverview() {
className="flex flex-col flex-wrap items-center gap-2"
>
<div
className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten style-sera:rounded-none style-sera:after:rounded-none"
style={
{
"--color": `var(${variant})`,

2
apps/v4/registry/bases/base/blocks/preview/cards/typography-specimen.tsx
View File

@@ -52,7 +52,7 @@ export function TypographySpecimen() {
<div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
{headingLabel} - {bodyLabel}
</div>
<p className="cn-font-heading text-2xl font-medium">
<p className="cn-font-heading text-2xl font-medium style-sera:text-lg style-sera:font-normal style-sera:tracking-wider style-sera:uppercase">
Designing with rhythm and hierarchy.
</p>
<p className="text-sm leading-relaxed text-muted-foreground">

9
apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
View File

@@ -135,8 +135,8 @@ export function UIElements() {
<div className="flex items-center gap-4">
<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline" />}>
<span className="hidden md:block">Alert Dialog</span>
<span className="block md:hidden">Dialog</span>
<span className="hidden md:flex style-sera:md:hidden">Alert Dialog</span>
<span className="flex md:hidden style-sera:md:flex">Dialog</span>
</AlertDialogTrigger>
<AlertDialogContent size="sm">
<AlertDialogHeader>
@@ -153,7 +153,10 @@ export function UIElements() {
</AlertDialogContent>
</AlertDialog>
<ButtonGroup>
<Button variant="outline">Button Group</Button>
<Button variant="outline">
<span className="style-sera:hidden">Button Group</span>
<span className="hidden style-sera:block">Group</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" size="icon" />}

32
apps/v4/registry/bases/base/examples/demo.tsx
View File

@@ -120,7 +120,7 @@ export function Demo() {
<Card>
<CardContent>
<div className="grid grid-cols-8 place-items-center gap-4">
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CopyIcon"
tabler="IconCopy"
@@ -129,7 +129,7 @@ export function Demo() {
remixicon="RiFileCopyLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CircleAlertIcon"
tabler="IconExclamationCircle"
@@ -138,7 +138,7 @@ export function Demo() {
remixicon="RiErrorWarningLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="TrashIcon"
tabler="IconTrash"
@@ -147,7 +147,7 @@ export function Demo() {
remixicon="RiDeleteBinLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ShareIcon"
tabler="IconShare"
@@ -156,7 +156,7 @@ export function Demo() {
remixicon="RiShareLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ShoppingBagIcon"
tabler="IconShoppingBag"
@@ -165,7 +165,7 @@ export function Demo() {
remixicon="RiShoppingBagLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="MoreHorizontalIcon"
tabler="IconDots"
@@ -174,7 +174,7 @@ export function Demo() {
remixicon="RiMoreLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="Loader2Icon"
tabler="IconLoader"
@@ -183,7 +183,7 @@ export function Demo() {
remixicon="RiLoaderLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="PlusIcon"
tabler="IconPlus"
@@ -192,7 +192,7 @@ export function Demo() {
remixicon="RiAddLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="MinusIcon"
tabler="IconMinus"
@@ -201,7 +201,7 @@ export function Demo() {
remixicon="RiSubtractLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowLeftIcon"
tabler="IconArrowLeft"
@@ -210,7 +210,7 @@ export function Demo() {
remixicon="RiArrowLeftLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowRightIcon"
tabler="IconArrowRight"
@@ -219,7 +219,7 @@ export function Demo() {
remixicon="RiArrowRightLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CheckIcon"
tabler="IconCheck"
@@ -228,7 +228,7 @@ export function Demo() {
remixicon="RiCheckLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronDownIcon"
tabler="IconChevronDown"
@@ -237,7 +237,7 @@ export function Demo() {
remixicon="RiArrowDownSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronRightIcon"
tabler="IconChevronRight"
@@ -246,7 +246,7 @@ export function Demo() {
remixicon="RiArrowRightSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="SearchIcon"
tabler="IconSearch"
@@ -255,7 +255,7 @@ export function Demo() {
remixicon="RiSearchLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="SettingsIcon"
tabler="IconSettings"

12
apps/v4/registry/bases/radix/blocks/preview-02/cards/contribution-history.tsx
View File

@@ -24,6 +24,7 @@ import {
ItemContent,
ItemDescription,
} from "@/registry/bases/radix/ui/item"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
const chartData = [
{ month: "Dec", amount: 800 },
@@ -42,6 +43,9 @@ const chartConfig = {
} satisfies ChartConfig
export function ContributionHistory() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -71,13 +75,13 @@ export function ContributionHistory() {
<Bar
dataKey="amount"
fill="var(--color-amount)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
maxBarSize={40}
/>
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-4">
<CardContent>
<div className="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
<Item variant="muted" className="flex-col items-stretch">
<ItemContent className="gap-1">
@@ -106,7 +110,9 @@ export function ContributionHistory() {
</ItemContent>
</Item>
</div>
<Button className="w-full">View Full Report</Button>
</CardContent>
<CardFooter className="flex-col gap-4">
<Button className="style-sera:w-full">View Full Report</Button>
</CardFooter>
</Card>
)

6
apps/v4/registry/bases/radix/blocks/preview-02/cards/dividend-income.tsx
View File

@@ -24,6 +24,7 @@ import {
ItemGroup,
ItemTitle,
} from "@/registry/bases/radix/ui/item"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const HOLDINGS = [
@@ -81,6 +82,9 @@ const miniChartConfig = {
} satisfies ChartConfig
export function DividendIncome() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -123,7 +127,7 @@ export function DividendIncome() {
<Bar
dataKey="value"
fill="var(--color-value)"
radius={[3, 3, 0, 0]}
radius={isRounded ? [3, 3, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

2
apps/v4/registry/bases/radix/blocks/preview-02/cards/index-investing.tsx
View File

@@ -19,7 +19,7 @@ export function IndexInvesting() {
</CardDescription>
</CardHeader>
<CardContent>
<CardDescription className="mt-3 text-sm leading-relaxed">
<CardDescription className="mt-3 text-sm leading-relaxed style-sera:mt-0">
<a
href="#"
className="underline underline-offset-4 hover:text-primary"

6
apps/v4/registry/bases/radix/blocks/preview-02/cards/power-usage.tsx
View File

@@ -18,6 +18,7 @@ import {
} from "@/registry/bases/radix/ui/chart"
import { Progress } from "@/registry/bases/radix/ui/progress"
import { Separator } from "@/registry/bases/radix/ui/separator"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
const chartData = [
{ hour: "6a", usage: 1.2 },
@@ -38,6 +39,9 @@ const chartConfig = {
} satisfies ChartConfig
export function PowerUsage() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -64,7 +68,7 @@ export function PowerUsage() {
<Bar
dataKey="usage"
fill="var(--color-usage)"
radius={[4, 4, 0, 0]}
radius={isRounded ? [4, 4, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

4
apps/v4/registry/bases/radix/blocks/preview-02/cards/preferences.tsx
View File

@@ -67,7 +67,7 @@ export function Preferences() {
</SelectContent>
</Select>
</Field>
<FieldSeparator className="-my-4" />
<FieldSeparator className="-my-4 style-sera:hidden" />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="public-statistics">
@@ -80,7 +80,7 @@ export function Preferences() {
</FieldContent>
<Switch id="public-statistics" defaultChecked />
</Field>
<FieldSeparator className="-my-4" />
<FieldSeparator className="-my-4 style-sera:hidden" />
<Field orientation="horizontal">
<FieldContent>
<FieldLabel htmlFor="email-notifications">

11
apps/v4/registry/bases/radix/blocks/preview-02/cards/receiving-method.tsx
View File

@@ -18,6 +18,7 @@ import {
FieldLabel,
FieldLegend,
FieldSet,
FieldTitle,
} from "@/registry/bases/radix/ui/field"
import { Input } from "@/registry/bases/radix/ui/input"
import {
@@ -59,15 +60,13 @@ export function ReceivingMethod() {
<FieldLegend variant="label">Receiving Method</FieldLegend>
<RadioGroup
defaultValue="bank"
className="grid grid-cols-1 items-start gap-3 md:grid-cols-2"
className="grid grid-cols-1 items-start gap-3 md:grid-cols-2 style-sera:grid-cols-1"
>
<FieldLabel htmlFor="method-bank">
<Field orientation="horizontal" className="pb-2.5">
<RadioGroupItem value="bank" id="method-bank" />
<FieldContent>
<FieldDescription className="font-medium text-foreground">
Bank Transfer
</FieldDescription>
<FieldTitle>Bank Transfer</FieldTitle>
<FieldDescription>SWIFT / IBAN</FieldDescription>
</FieldContent>
</Field>
@@ -76,9 +75,7 @@ export function ReceivingMethod() {
<Field orientation="horizontal" className="pb-2.5">
<RadioGroupItem value="paypal" id="method-paypal" />
<FieldContent>
<FieldDescription className="font-medium text-foreground">
PayPal
</FieldDescription>
<FieldTitle>PayPal</FieldTitle>
<FieldDescription className="line-clamp-1">
Instant Payout
</FieldDescription>

8
apps/v4/registry/bases/radix/blocks/preview-02/cards/social-links.tsx
View File

@@ -96,9 +96,11 @@ export function SocialLinks() {
</Field>
</FieldGroup>
</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="secondary">Discard</Button>
<Button>Save Changes</Button>
<CardFooter className="justify-end gap-2 style-sera:justify-center">
<Button variant="secondary" className="style-sera:flex-1">
Discard
</Button>
<Button className="style-sera:flex-1">Save Changes</Button>
</CardFooter>
</Card>
)

2
apps/v4/registry/bases/radix/blocks/preview-02/cards/stock-performance.tsx
View File

@@ -103,7 +103,7 @@ export function StockPerformance() {
</Combobox>
</Field>
</FieldGroup>
<Separator />
<Separator className="style-sera:hidden" />
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<AreaChart
accessibilityLayer

2
apps/v4/registry/bases/radix/blocks/preview-02/cards/upcoming-payments.tsx
View File

@@ -37,7 +37,7 @@ export function UpcomingPayments() {
mode="single"
selected={date}
onSelect={setDate}
className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)]"
className="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"
/>
</Item>
<ItemGroup className="w-full">

6
apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
View File

@@ -95,8 +95,10 @@ export function ActivateAgentDialog() {
</Alert>
</CardContent>
<CardFooter className="justify-end gap-2">
<Button variant="outline">Cancel</Button>
<Button>Enable with $100 credits</Button>
<Button variant="outline" className="style-sera:hidden">
Cancel
</Button>
<Button className="style-sera:w-full">Enable with $100 credits</Button>
</CardFooter>
</Card>
)

8
apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
View File

@@ -3,6 +3,7 @@
import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
import { Button } from "@/registry/bases/radix/ui/button"
import {
Card,
@@ -49,6 +50,9 @@ const desktopDelta = Math.round(
const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
export function BarChartCard() {
const [params] = useDesignSystemSearchParams()
const isRounded = !["lyra", "sera"].includes(params.style)
return (
<Card>
<CardHeader>
@@ -84,12 +88,12 @@ export function BarChartCard() {
<Bar
dataKey="desktop"
fill="var(--color-desktop)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
/>
<Bar
dataKey="mobile"
fill="var(--color-mobile)"
radius={[6, 6, 0, 0]}
radius={isRounded ? [6, 6, 0, 0] : 0}
/>
</BarChart>
</ChartContainer>

4
apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
View File

@@ -56,7 +56,9 @@ export function ContributionsActivity() {
</form>
</CardContent>
<CardFooter>
<Button form="contributions-activity">Save Changes</Button>
<Button form="contributions-activity" className="style-sera:w-full">
Save Changes
</Button>
</CardFooter>
</Card>
)

6
apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
View File

@@ -57,7 +57,11 @@ export function FeedbackForm() {
</form>
</CardContent>
<CardFooter>
<Button type="submit" form="feedback-form">
<Button
type="submit"
form="feedback-form"
className="style-sera:w-full"
>
Submit
</Button>
</CardFooter>

4
apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
View File

@@ -70,7 +70,9 @@ export function GithubProfile() {
</form>
</CardContent>
<CardFooter>
<Button form="profile">Save Profile</Button>
<Button form="profile" className="style-sera:w-full">
Save Profile
</Button>
</CardFooter>
</Card>
)

2
apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
View File

@@ -128,7 +128,7 @@ export function IconPreviewGrid() {
{PREVIEW_ICONS.map((icon, index) => (
<div
key={index}
className="flex size-8 items-center justify-center rounded-md ring ring-border *:[svg]:size-4"
className="flex size-8 items-center justify-center rounded-md ring ring-border style-sera:rounded-none *:[svg]:size-4"
>
<IconPlaceholder
lucide={icon.lucide}

11
apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
View File

@@ -82,9 +82,14 @@ export function ReportBug() {
</FieldGroup>
</CardContent>
<CardFooter>
<Field orientation="horizontal" className="justify-end">
<Button variant="outline">Attach File</Button>
<Button>Submit Bug</Button>
<Field
orientation="horizontal"
className="justify-end style-sera:justify-center"
>
<Button variant="outline" className="style-sera:flex-1">
Attach File
</Button>
<Button className="style-sera:flex-1">Submit Bug</Button>
</Field>
</CardFooter>
</Card>

6
apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
View File

@@ -29,14 +29,14 @@ export function StyleOverview() {
<Card>
<CardContent className="flex flex-col gap-6 style-lyra:gap-4 style-mira:gap-4">
<div className="flex flex-col gap-1">
<div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg">
<div className="cn-font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg style-sera:text-lg style-sera:tracking-wide style-sera:uppercase">
{currentStyle?.title} -{" "}
{currentFontHeading?.name &&
currentFontHeading.name !== currentFont?.name
? currentFontHeading.name
: currentFont?.name}
</div>
<div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm">
<div className="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm style-sera:text-sm style-sera:leading-relaxed">
Designers love packing quirky glyphs into test phrases. This is a
preview of the typography styles.
</div>
@@ -61,7 +61,7 @@ export function StyleOverview() {
className="flex flex-col flex-wrap items-center gap-2"
>
<div
className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten style-sera:rounded-none style-sera:after:rounded-none"
style={
{
"--color": `var(${variant})`,

2
apps/v4/registry/bases/radix/blocks/preview/cards/typography-specimen.tsx
View File

@@ -52,7 +52,7 @@ export function TypographySpecimen() {
<div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
{headingLabel} - {bodyLabel}
</div>
<p className="cn-font-heading text-2xl font-medium">
<p className="cn-font-heading text-2xl font-medium style-sera:text-lg style-sera:font-normal style-sera:tracking-wider style-sera:uppercase">
Designing with rhythm and hierarchy.
</p>
<p className="text-sm leading-relaxed text-muted-foreground">

13
apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
View File

@@ -136,8 +136,12 @@ export function UIElements() {
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">
<span className="hidden md:block">Alert Dialog</span>
<span className="block md:hidden">Dialog</span>
<span className="hidden md:flex style-sera:md:hidden">
Alert Dialog
</span>
<span className="flex md:hidden style-sera:md:flex">
Dialog
</span>
</Button>
</AlertDialogTrigger>
<AlertDialogContent size="sm">
@@ -155,7 +159,10 @@ export function UIElements() {
</AlertDialogContent>
</AlertDialog>
<ButtonGroup>
<Button variant="outline">Button Group</Button>
<Button variant="outline">
<span className="style-sera:hidden">Button Group</span>
<span className="hidden style-sera:block">Group</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">

32
apps/v4/registry/bases/radix/examples/demo.tsx
View File

@@ -113,7 +113,7 @@ export function Demo() {
<Card>
<CardContent>
<div className="grid grid-cols-8 place-items-center gap-4">
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CopyIcon"
tabler="IconCopy"
@@ -122,7 +122,7 @@ export function Demo() {
remixicon="RiFileCopyLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CircleAlertIcon"
tabler="IconExclamationCircle"
@@ -131,7 +131,7 @@ export function Demo() {
remixicon="RiErrorWarningLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="TrashIcon"
tabler="IconTrash"
@@ -140,7 +140,7 @@ export function Demo() {
remixicon="RiDeleteBinLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ShareIcon"
tabler="IconShare"
@@ -149,7 +149,7 @@ export function Demo() {
remixicon="RiShareLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ShoppingBagIcon"
tabler="IconShoppingBag"
@@ -158,7 +158,7 @@ export function Demo() {
remixicon="RiShoppingBagLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="MoreHorizontalIcon"
tabler="IconDots"
@@ -167,7 +167,7 @@ export function Demo() {
remixicon="RiMoreLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="Loader2Icon"
tabler="IconLoader"
@@ -176,7 +176,7 @@ export function Demo() {
remixicon="RiLoaderLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="PlusIcon"
tabler="IconPlus"
@@ -185,7 +185,7 @@ export function Demo() {
remixicon="RiAddLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="MinusIcon"
tabler="IconMinus"
@@ -194,7 +194,7 @@ export function Demo() {
remixicon="RiSubtractLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowLeftIcon"
tabler="IconArrowLeft"
@@ -203,7 +203,7 @@ export function Demo() {
remixicon="RiArrowLeftLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowRightIcon"
tabler="IconArrowRight"
@@ -212,7 +212,7 @@ export function Demo() {
remixicon="RiArrowRightLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="CheckIcon"
tabler="IconCheck"
@@ -221,7 +221,7 @@ export function Demo() {
remixicon="RiCheckLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronDownIcon"
tabler="IconChevronDown"
@@ -230,7 +230,7 @@ export function Demo() {
remixicon="RiArrowDownSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronRightIcon"
tabler="IconChevronRight"
@@ -239,7 +239,7 @@ export function Demo() {
remixicon="RiArrowRightSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="SearchIcon"
tabler="IconSearch"
@@ -248,7 +248,7 @@ export function Demo() {
remixicon="RiSearchLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<Card className="flex size-8 items-center justify-center p-0 shadow-none *:[svg]:size-4">
<IconPlaceholder
lucide="SettingsIcon"
tabler="IconSettings"

10
apps/v4/registry/bases/radix/examples/tabs-example.tsx
View File

@@ -197,7 +197,7 @@ function TabsWithContent() {
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
<TabsContent value="account">
Manage your account preferences and profile information.
</TabsContent>
@@ -222,7 +222,7 @@ function TabsLineWithContent() {
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
<TabsContent value="account">
Manage your account preferences and profile information.
</TabsContent>
@@ -286,7 +286,7 @@ function TabsWithDropdown() {
</DropdownMenu>
</div>
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
<TabsContent value="overview">
View your dashboard metrics and key performance indicators.
</TabsContent>
@@ -311,7 +311,7 @@ function TabsVertical() {
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
<TabsContent value="account">
Manage your account preferences and profile information.
</TabsContent>
@@ -344,7 +344,7 @@ function TabsWithInputAndButton() {
<Button>Action</Button>
</div>
</div>
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6">
<div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4 style-luma:rounded-xl style-luma:p-6 style-sera:rounded-none style-sera:p-6">
<TabsContent value="overview">
View your dashboard metrics and key performance indicators.
</TabsContent>

31
apps/v4/registry/styles/style-sera.css
View File

@@ -233,12 +233,12 @@
}
.cn-calendar-caption-label {
@apply h-8 rounded-none pr-2 pl-3;
@apply h-8 pr-2 pl-3;
}
/* MARK: Card */
.cn-card {
@apply bg-card text-card-foreground ring-foreground/10 gap-8 overflow-hidden rounded-none py-8 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
@apply bg-card text-card-foreground ring-foreground/5 gap-8 overflow-hidden py-8 text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
}
.cn-card-header {
@@ -246,7 +246,7 @@
}
.cn-card-title {
@apply text-lg font-normal uppercase tracking-wider;
@apply text-lg tracking-wider uppercase;
}
.cn-card-description {
@@ -258,21 +258,12 @@
}
.cn-card-footer {
@apply rounded-none px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5;
}
/* MARK: Carousel */
.cn-carousel-previous {
@apply rounded-none;
}
.cn-carousel-next {
@apply rounded-none;
@apply px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5;
}
/* MARK: Chart */
.cn-chart-tooltip {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-1.5 rounded-none px-2.5 py-1.5 text-xs shadow-sm ring-1;
@apply bg-popover text-popover-foreground ring-foreground/10 gap-1.5 px-2.5 py-1.5 text-xs shadow-sm ring-1;
}
/* MARK: Checkbox */
@@ -548,7 +539,7 @@
/* MARK: Empty */
.cn-empty {
@apply gap-4 rounded-none border-dashed p-12;
@apply gap-4 border-dashed p-12;
}
.cn-empty-header {
@@ -568,7 +559,7 @@
}
.cn-empty-title {
@apply text-lg font-semibold tracking-wide uppercase;
@apply text-lg tracking-wider uppercase;
}
.cn-empty-description {
@@ -1184,11 +1175,11 @@
/* MARK: Switch */
.cn-switch {
@apply data-checked:bg-primary data-unchecked:bg-input data-checked:border-primary border data-unchecked:border-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-4.5 data-[size=default]:w-9 data-[size=sm]:h-3.5 data-[size=sm]:w-7;
@apply data-checked:bg-primary data-unchecked:bg-input data-checked:border-primary border data-unchecked:border-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-4.5 data-[size=default]:w-8.25 data-[size=sm]:h-3.5 data-[size=sm]:w-6.25;
}
.cn-switch-thumb {
@apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%+2px)] data-unchecked:translate-x-0;
@apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-checked:translate-x-[calc(100%+2px)] data-unchecked:translate-x-0.25;
}
/* MARK: Table */
@@ -1234,11 +1225,11 @@
}
.cn-tabs-list {
@apply rounded-none p-0.5 group-data-horizontal/tabs:h-10 group-data-vertical/tabs:rounded-none data-[variant=line]:rounded-none;
@apply p-1 group-data-horizontal/tabs:h-10;
}
.cn-tabs-trigger {
@apply gap-2 rounded-none border border-transparent! px-4 py-1.5 text-xs font-medium group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 group-data-vertical/tabs:rounded-none [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
@apply gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 uppercase tracking-wider;
}
.cn-tabs-content {