Skip to content

Commit 42151c7

Browse files
pasqualevitiellopasqualevitiello
authored
fix(card): alignment issue (#730)
1 parent f066367 commit 42151c7

3 files changed

Lines changed: 7 additions & 7 deletions

File tree

‎apps/ui/public/r/card.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"files": [
88
{
99
"path": "registry/default/ui/card.tsx",
10-
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n className,\n ),\n \"data-slot\": \"card\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrame({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=card]:-m-px *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n className,\n ),\n \"data-slot\": \"card-frame\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n className,\n ),\n \"data-slot\": \"card-frame-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameTitle({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"font-semibold text-sm\", className),\n \"data-slot\": \"card-frame-title\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameDescription({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"text-muted-foreground text-sm\", className),\n \"data-slot\": \"card-frame-description\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end\",\n className,\n ),\n \"data-slot\": \"card-frame-action\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameFooter({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"px-6 py-4\", className),\n \"data-slot\": \"card-frame-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n className,\n ),\n \"data-slot\": \"card-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardTitle({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"font-semibold text-lg leading-none\", className),\n \"data-slot\": \"card-title\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardDescription({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"text-muted-foreground text-sm\", className),\n \"data-slot\": \"card-description\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n className,\n ),\n \"data-slot\": \"card-action\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardPanel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n className,\n ),\n \"data-slot\": \"card-panel\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFooter({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n className,\n ),\n \"data-slot\": \"card-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport { CardPanel as CardContent };\n",
10+
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n className,\n ),\n \"data-slot\": \"card\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrame({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=card]:-m-px *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n className,\n ),\n \"data-slot\": \"card-frame\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n className,\n ),\n \"data-slot\": \"card-frame-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameTitle({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"self-center font-semibold text-sm\", className),\n \"data-slot\": \"card-frame-title\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameDescription({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"self-center text-muted-foreground text-sm\", className),\n \"data-slot\": \"card-frame-description\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n className,\n ),\n \"data-slot\": \"card-frame-action\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFrameFooter({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"px-6 py-4\", className),\n \"data-slot\": \"card-frame-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n className,\n ),\n \"data-slot\": \"card-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardTitle({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"font-semibold text-lg leading-none\", className),\n \"data-slot\": \"card-title\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardDescription({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"text-muted-foreground text-sm\", className),\n \"data-slot\": \"card-description\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n className,\n ),\n \"data-slot\": \"card-action\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardPanel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n className,\n ),\n \"data-slot\": \"card-panel\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function CardFooter({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n className,\n ),\n \"data-slot\": \"card-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport { CardPanel as CardContent };\n",
1111
"type": "registry:ui"
1212
}
1313
],

‎apps/ui/registry/default/ui/card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function CardFrameTitle({
7171
...props
7272
}: useRender.ComponentProps<"div">): React.ReactElement {
7373
const defaultProps = {
74-
className: cn("font-semibold text-sm", className),
74+
className: cn("self-center font-semibold text-sm", className),
7575
"data-slot": "card-frame-title",
7676
};
7777

@@ -88,7 +88,7 @@ export function CardFrameDescription({
8888
...props
8989
}: useRender.ComponentProps<"div">): React.ReactElement {
9090
const defaultProps = {
91-
className: cn("text-muted-foreground text-sm", className),
91+
className: cn("self-center text-muted-foreground text-sm", className),
9292
"data-slot": "card-frame-description",
9393
};
9494

@@ -106,7 +106,7 @@ export function CardFrameAction({
106106
}: useRender.ComponentProps<"div">): React.ReactElement {
107107
const defaultProps = {
108108
className: cn(
109-
"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end",
109+
"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end",
110110
className,
111111
),
112112
"data-slot": "card-frame-action",

‎packages/ui/src/components/card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function CardFrameTitle({
7171
...props
7272
}: useRender.ComponentProps<"div">): React.ReactElement {
7373
const defaultProps = {
74-
className: cn("font-semibold text-sm", className),
74+
className: cn("self-center font-semibold text-sm", className),
7575
"data-slot": "card-frame-title",
7676
};
7777

@@ -88,7 +88,7 @@ export function CardFrameDescription({
8888
...props
8989
}: useRender.ComponentProps<"div">): React.ReactElement {
9090
const defaultProps = {
91-
className: cn("text-muted-foreground text-sm", className),
91+
className: cn("self-center text-muted-foreground text-sm", className),
9292
"data-slot": "card-frame-description",
9393
};
9494

@@ -106,7 +106,7 @@ export function CardFrameAction({
106106
}: useRender.ComponentProps<"div">): React.ReactElement {
107107
const defaultProps = {
108108
className: cn(
109-
"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end",
109+
"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end",
110110
className,
111111
),
112112
"data-slot": "card-frame-action",

0 commit comments

Comments
 (0)