Skip to content

style(ui): use bold titles for overlays and empty states #862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pasqualevitiello merged 2 commits into from
Oct 12, 2026
Merged

style(ui): use bold titles for overlays and empty states #862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
993b971
style(ui): use bold overlay and empty titles
pasqualevitiello Oct 11, 2026
b7c15f7
Merge branch 'main' into codex/bold-overlay-titles
pasqualevitiello Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/ui/public/r/alert-dialog.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"path": "registry/default/ui/alert-dialog.tsx",
"content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n AlertDialogPrimitive.createHandle;\n\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n AlertDialogPrimitive.Root;\n\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\n AlertDialogPrimitive.Portal;\n\nexport function AlertDialogTrigger(\n props: AlertDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return (\n <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n );\n}\n\nexport function AlertDialogBackdrop({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute\",\n className,\n )}\n data-slot=\"alert-dialog-backdrop\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogViewport({\n className,\n ...props\n}: AlertDialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n className,\n )}\n data-slot=\"alert-dialog-viewport\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogPopup({\n className,\n bottomStickOnMobile = true,\n portalProps,\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n bottomStickOnMobile?: boolean;\n portalProps?: AlertDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n return (\n <AlertDialogPortal {...portalProps}>\n <AlertDialogBackdrop />\n <AlertDialogViewport\n className={cn(\n bottomStickOnMobile &&\n \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n )}\n >\n <AlertDialogPrimitive.Popup\n className={cn(\n \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n bottomStickOnMobile &&\n \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n className,\n )}\n data-slot=\"alert-dialog-popup\"\n {...props}\n />\n </AlertDialogViewport>\n </AlertDialogPortal>\n );\n}\n\nexport function AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left\",\n className,\n )}\n data-slot=\"alert-dialog-header\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogFooter({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n return (\n <div\n className={cn(\n \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n variant === \"default\" && \"border-t bg-muted/72 py-4\",\n variant === \"bare\" && \"pb-6\",\n className,\n )}\n data-slot=\"alert-dialog-footer\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogTitle({\n className,\n ...props\n}: AlertDialogPrimitive.Title.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Title\n className={cn(\n \"font-heading font-semibold text-xl leading-none\",\n className,\n )}\n data-slot=\"alert-dialog-title\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogDescription({\n className,\n ...props\n}: AlertDialogPrimitive.Description.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Description\n className={cn(\"text-muted-foreground text-sm\", className)}\n data-slot=\"alert-dialog-description\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogClose(\n props: AlertDialogPrimitive.Close.Props,\n): React.ReactElement {\n return (\n <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n );\n}\n\nexport {\n AlertDialogPrimitive,\n AlertDialogBackdrop as AlertDialogOverlay,\n AlertDialogPopup as AlertDialogContent,\n};\n",
"content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n AlertDialogPrimitive.createHandle;\n\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n AlertDialogPrimitive.Root;\n\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\n AlertDialogPrimitive.Portal;\n\nexport function AlertDialogTrigger(\n props: AlertDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return (\n <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n );\n}\n\nexport function AlertDialogBackdrop({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute\",\n className,\n )}\n data-slot=\"alert-dialog-backdrop\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogViewport({\n className,\n ...props\n}: AlertDialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n className,\n )}\n data-slot=\"alert-dialog-viewport\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogPopup({\n className,\n bottomStickOnMobile = true,\n portalProps,\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n bottomStickOnMobile?: boolean;\n portalProps?: AlertDialogPrimitive.Portal.Props;\n}): React.ReactElement {\n return (\n <AlertDialogPortal {...portalProps}>\n <AlertDialogBackdrop />\n <AlertDialogViewport\n className={cn(\n bottomStickOnMobile &&\n \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n )}\n >\n <AlertDialogPrimitive.Popup\n className={cn(\n \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n bottomStickOnMobile &&\n \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n className,\n )}\n data-slot=\"alert-dialog-popup\"\n {...props}\n />\n </AlertDialogViewport>\n </AlertDialogPortal>\n );\n}\n\nexport function AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left\",\n className,\n )}\n data-slot=\"alert-dialog-header\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogFooter({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n return (\n <div\n className={cn(\n \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n variant === \"default\" && \"border-t bg-muted/72 py-4\",\n variant === \"bare\" && \"pb-6\",\n className,\n )}\n data-slot=\"alert-dialog-footer\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogTitle({\n className,\n ...props\n}: AlertDialogPrimitive.Title.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Title\n className={cn(\"font-bold font-heading text-xl leading-none\", className)}\n data-slot=\"alert-dialog-title\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogDescription({\n className,\n ...props\n}: AlertDialogPrimitive.Description.Props): React.ReactElement {\n return (\n <AlertDialogPrimitive.Description\n className={cn(\"text-muted-foreground text-sm\", className)}\n data-slot=\"alert-dialog-description\"\n {...props}\n />\n );\n}\n\nexport function AlertDialogClose(\n props: AlertDialogPrimitive.Close.Props,\n): React.ReactElement {\n return (\n <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n );\n}\n\nexport {\n AlertDialogPrimitive,\n AlertDialogBackdrop as AlertDialogOverlay,\n AlertDialogPopup as AlertDialogContent,\n};\n",
"type": "registry:ui"
}
],
Expand Down
Loading
Loading