pruebas

apps/web/src/global.css

@@ -16,3 +16,17 @@
 @source '../node_modules/@repo/shadcn-ui';
 @source '../node_modules/@repo/rdx-ui';
 */
+
+@theme inline {
+  --sidebar-width: calc(var(--spacing) * 64);
+  --sidebar-width-icon: 3rem;
+  --header-height: calc(var(--spacing) * 14);
+  --content-padding: calc(var(--spacing) * 4);
+  --content-margin: calc(var(--spacing) * 1.5);
+  --content-full-height: calc(
+    100vh -
+    var(--header-height) -
+    (var(--content-padding) * 2) -
+    (var(--content-margin) * 2)
+  );
+}

modules/core/src/web/components/page-header.tsx

@@ -21,7 +21,7 @@ export function PageHeader({
   className,
 }: PageHeaderProps) {
   return (
-    <div className={cn("pt-6 pb-4 lg:flex lg:items-center lg:justify-between", className)}>
+    <div className={cn("flex flex-row items-center justify-between", className)}>
       {/* Lado izquierdo */}
       <div className="min-w-0 flex-1">
         <div className="flex items-start gap-4">
@@ -29,17 +29,17 @@ export function PageHeader({
             <Button
               className="cursor-pointer"
               onClick={() => window.history.back()}
-              size="icon"
-              variant="ghost"
+              size="default"
+              variant="outline"
             >
               <ChevronLeftIcon className="size-5" />
             </Button>
           )}
 
           <div>
-            <h2 className="h-8 text-xl font-semibold text-foreground sm:truncate sm:tracking-tight">
+            <h1 className="text-xl font-semibold tracking-tight lg:text-2xl h-8 text-foreground sm:truncate sm:tracking-tight">
               {title}
-            </h2>
+            </h1>
             {description && <div className="text-sm text-muted-foreground">{description}</div>}
           </div>
         </div>

modules/core/src/web/hooks/use-unsaved-changes-notifier/components/form-commit-button-group.tsx

@@ -94,8 +94,8 @@ export const UpdateCommitButtonGroup = ({
         className
       )}
     >
-      {submit && <SubmitFormButton {...submit} />}
       {showCancel && <CancelFormButton {...cancel} />}
+      {submit && <SubmitFormButton {...submit} />}
 
       {/* Menú de acciones adicionales */}
       {hasSecondaryActions && (

modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx

@@ -105,6 +105,7 @@ export const ListProformasPage = () => {
             <Button
               aria-label={t("pages.proformas.create.title")}
               onClick={() => navigate("/proformas/create")}
+              size={"default"}
             >
               <PlusIcon aria-hidden className="mr-2 size-4" />
               {t("pages.proformas.create.title")}

modules/customer-invoices/src/web/proformas/shared/ui/blocks/proforma-layout.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
 
 export const ProformaLayout = ({ children }: PropsWithChildren) => {
-  return <div className="overflow-y-scroll">{children}</div>;
+  return <div className="space-y-4">{children}</div>;
 };

modules/customer-invoices/src/web/proformas/update/ui/blocks/proforma-header-form-grid.tsx

@@ -1,5 +1,6 @@
 // update/ui/blocks/proforma-header-form-grid.tsx
 
+import { FieldGroup } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import type { ReactNode } from "react";
 
@@ -9,5 +10,9 @@ interface ProformaHeaderFormGridProps {
 }
 
 export const ProformaHeaderFormGrid = ({ children, className }: ProformaHeaderFormGridProps) => {
-  return <div className={cn("grid grid-cols-1 gap-4 md:grid-cols-12", className)}>{children}</div>;
+  return (
+    <FieldGroup className={cn("grid grid-cols-1 gap-4 md:grid-cols-12", className)}>
+      {children}
+    </FieldGroup>
+  );
 };

modules/customer-invoices/src/web/proformas/update/ui/blocks/proforma-section-card.tsx

@@ -1,5 +1,6 @@
 // update/ui/blocks/proforma-section-card.tsx
 
+import { FieldDescription, FieldLegend, FieldSet } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import type { ReactNode } from "react";
 
@@ -18,12 +19,18 @@ export const ProformaSectionCard = ({
 }: ProformaSectionCardProps) => {
   return (
     <section className={cn("rounded-xl border bg-background p-4 md:p-6", className)}>
-      <div className="mb-4 space-y-1 md:mb-6">
-        <h2 className="text-base font-semibold tracking-tight">{title}</h2>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
-      </div>
+      <FieldSet>
+        <FieldLegend className="mb-4 space-y-1 md:mb-6">
+          <h2 className="text-base font-semibold tracking-tight">{title}</h2>
+          {description ? (
+            <FieldDescription className="text-sm text-muted-foreground">
+              {description}
+            </FieldDescription>
+          ) : null}
+        </FieldLegend>
 
-      {children}
+        {children}
+      </FieldSet>
     </section>
   );
 };

modules/customer-invoices/src/web/proformas/update/ui/blocks/proforma-update-editor-form.tsx

@@ -28,7 +28,7 @@ export const ProformaUpdateEditorForm = ({
   const { t } = useTranslation();
 
   return (
-    <form className="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 xl:px-8" onSubmit={onSubmit}>
+    <form onSubmit={onSubmit}>
       <div className="space-y-6">
         <ProformaUpdateHeaderEditor
           currencyOptions={[]}
@@ -42,12 +42,12 @@ export const ProformaUpdateEditorForm = ({
         />
 
         <div className="flex flex-col-reverse gap-3 border-t pt-4 sm:flex-row sm:justify-end">
-          <Button type="button" variant="outline">
-            {t("common.cancel")}
+          <Button disabled={isSubmitting} onClick={onReset} type="button" variant="outline">
+            {t("common.reset", "Restablecer")}
           </Button>
 
           <Button disabled={isSubmitting} type="submit">
-            {isSubmitting ? t("common.saving") : t("common.save")}
+            {isSubmitting ? t("common.saving", "Guardando...") : t("common.save", "Guardar")}
           </Button>
         </div>
       </div>

modules/customer-invoices/src/web/proformas/update/ui/editors/proforma-update-header-editor.tsx

@@ -1,3 +1,4 @@
+import { DatePickerField, TextField } from "@repo/rdx-ui/components";
 import {
   Input,
   Select,
@@ -58,82 +59,43 @@ export const ProformaUpdateHeaderEditor = ({
         title={t("proformas.update.sections.document")}
       >
         <ProformaHeaderFormGrid>
-          <ProformaFormFieldShell
-            error={errors.series?.message}
-            htmlFor="series"
-            label={t("proformas.fields.series")}
-            required
-            span="xs"
-          >
-            <Input className="h-10" disabled={isFieldLocked} id="series" {...register("series")} />
-          </ProformaFormFieldShell>
+          <TextField
+            className="md:col-span-2"
+            label={t("form_fields.series.label")}
+            name="series"
+            placeholder={t("form_fields.series.placeholder")}
+          />
 
-          <ProformaFormFieldShell
-            error={errors.number?.message}
-            htmlFor="number"
-            label={t("proformas.fields.number")}
+          <DatePickerField
+            className="md:col-span-3"
+            label={t("form_fields.invoice_date.label")}
+            name="invoice_date"
+            placeholder={t("form_fields.invoice_date.placeholder")}
             required
-            span="sm"
-          >
-            <Input className="h-10" disabled={isFieldLocked} id="number" {...register("number")} />
-          </ProformaFormFieldShell>
+          />
 
-          <ProformaFormFieldShell
-            error={errors.document_date?.message}
-            htmlFor="document_date"
-            label={t("proformas.fields.document_date")}
-            required
-            span="sm"
-          >
-            <Input
-              className="h-10"
-              disabled={isFieldLocked}
-              id="document_date"
-              type="date"
-              {...register("document_date")}
-            />
-          </ProformaFormFieldShell>
+          <DatePickerField
+            className="md:col-span-3"
+            label={t("form_fields.operation_date.label")}
+            name="operation_date"
+            placeholder={t("form_fields.operation_date.placeholder")}
+          />
 
-          <ProformaFormFieldShell
-            error={errors.status?.message}
-            htmlFor="status"
-            label={t("proformas.fields.status")}
-            required
-            span="md"
-          >
-            <Controller
-              control={control}
-              name="status"
-              render={({ field }) => (
-                <Select disabled={isFieldLocked} onValueChange={field.onChange} value={field.value}>
-                  <SelectTrigger className="h-10 w-full" id="status">
-                    <SelectValue placeholder={t("common.select")} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {statusOptions.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              )}
-            />
-          </ProformaFormFieldShell>
+          <TextField
+            className="md:col-span-4"
+            label={t("form_fields.reference.label")}
+            maxLength={256}
+            name="reference"
+            placeholder={t("form_fields.reference.placeholder")}
+          />
 
-          <ProformaFormFieldShell
-            error={errors.external_reference?.message}
-            htmlFor="external_reference"
-            label={t("proformas.fields.external_reference")}
-            span="md"
-          >
-            <Input
-              className="h-10"
-              disabled={isFieldLocked}
-              id="external_reference"
-              {...register("external_reference")}
-            />
-          </ProformaFormFieldShell>
+          <TextField
+            className="md:col-span-12"
+            label={t("form_fields.description.label")}
+            maxLength={256}
+            name="description"
+            placeholder={t("form_fields.description.placeholder")}
+          />
         </ProformaHeaderFormGrid>
       </ProformaSectionCard>
 

modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx

@@ -54,7 +54,7 @@ export const ProformaUpdatePage = () => {
 
   return (
     <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
-      <AppHeader className="bg-red-500 sticky top-0">
+      <AppHeader className="space-y-4 max-w-5xl mx-auto">
         <PageHeader
           backIcon
           description={t("pages.update.description")}
@@ -77,7 +77,7 @@ export const ProformaUpdatePage = () => {
           title={t("pages.update.title")}
         />
       </AppHeader>
-      <AppContent>
+      <AppContent className="space-y-4 max-w-5xl mx-auto">
         {/* Alerta de error de actualización (si ha fallado el último intento) */}
         {updateCtrl.isUpdateError && (
           <ErrorAlert
@@ -94,7 +94,6 @@ export const ProformaUpdatePage = () => {
         {!updateCtrl.isLoading && (
           <FormProvider {...updateCtrl.form}>
             <ProformaUpdateEditorForm
-              className="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 xl:px-8"
               formId={updateCtrl.formId}
               isSubmitting={updateCtrl.isUpdating}
               onReset={updateCtrl.resetForm}

packages/rdx-ui/src/components/form/form-field-label.tsx

@@ -1,5 +1,4 @@
 import { FieldLabel } from "@repo/shadcn-ui/components";
-import { cn } from "@repo/shadcn-ui/lib/utils";
 
 interface FormFieldLabelProps extends React.ComponentProps<typeof FieldLabel> {
   required?: boolean;
@@ -14,18 +13,14 @@ export const FormFieldLabel = ({
   ...props
 }: FormFieldLabelProps) => {
   return (
-    <FieldLabel className={cn(className)} {...props}>
+    <FieldLabel className={className} {...props}>
       {children}
 
       {required ? (
-        <span aria-hidden="true" className="ml-1 text-destructive">
+        <span aria-hidden="true" className="text-destructive">
           *
         </span>
       ) : null}
-
-      {!required && optional ? (
-        <span className="ml-1 text-muted-foreground text-xs">(optional)</span>
-      ) : null}
     </FieldLabel>
   );
 };

packages/rdx-ui/src/components/form/text-field.tsx

@@ -14,6 +14,16 @@ import { FormFieldLabel } from "./form-field-label.tsx";
 import { type TextFieldTypePreset, getInputPresetProps } from "./text-field-presets.tsx";
 import type { NativeInputProps } from "./types.ts";
 
+export type ProformaFieldSpan = "xs" | "sm" | "md" | "lg" | "full";
+
+const fieldSpanClasses: Record<ProformaFieldSpan, string> = {
+  xs: "md:col-span-2",
+  sm: "md:col-span-3",
+  md: "md:col-span-4",
+  lg: "md:col-span-6",
+  full: "md:col-span-12",
+};
+
 type TextFieldProps<TFormValues extends FieldValues> = Omit<NativeInputProps, "name"> & {
   name: FieldPath<TFormValues>;
 

packages/rdx-ui/src/components/layout/app-content.tsx

@@ -7,10 +7,7 @@ export const AppContent = ({
   ...props
 }: PropsWithChildren<{ className?: string }>) => {
   return (
-    <div
-      className={cn("app-content flex flex-1 flex-col gap-4 p-4 pt-6 min-h-screen", className)}
-      {...props}
-    >
+    <div className={cn("app-content", className)} {...props}>
       {children}
     </div>
   );

packages/rdx-ui/src/components/layout/app-header.tsx

@@ -7,14 +7,7 @@ export const AppHeader = ({
   ...props
 }: PropsWithChildren<{ className?: string }>) => {
   return (
-    <div
-      className={cn(
-        "md:rounded-tl-xl md:rounded-tr-xl",
-        "app-header gap-4 px-4 pt-0 border-b border-sidebar/25 bg-background",
-        className
-      )}
-      {...props}
-    >
+    <div className={cn("app-header", className)} {...props}>
       {children}
     </div>
   );

packages/rdx-ui/src/components/layout/app-layout.tsx

@@ -2,11 +2,11 @@ import { SidebarInset, SidebarProvider } from "@repo/shadcn-ui/components";
 import { Outlet } from "react-router";
 
 import { AppSidebar } from "./app-sidebar.tsx";
+import { SiteHeader } from "./site-header.tsx";
 
 export const AppLayout = () => {
   return (
     <SidebarProvider
-      className="bg-amber-500"
       style={
         {
           "--sidebar-width": "calc(var(--spacing) * 72)",
@@ -16,8 +16,13 @@ export const AppLayout = () => {
     >
       <AppSidebar className="bg-sidebar" variant="inset" />
       {/* Aquí está el MAIN */}
-      <SidebarInset className="app-main bg-muted overflow-hidden">
-        <Outlet />
+      <SidebarInset className="app-main bg-muted ">
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main p-(--content-padding) xl:group-data-[theme-content-layout=centered]/layout:container xl:group-data-[theme-content-layout=centered]/layout:mx-auto">
+            <Outlet />
+          </div>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

packages/rdx-ui/src/components/layout/app-sidebar.tsx

@@ -3,66 +3,71 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarRail,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
 } from "@repo/shadcn-ui/components";
 import {
-  BarChartIcon,
   CameraIcon,
-  ClipboardListIcon,
-  DatabaseIcon,
-  FileCheckIcon,
-  FileCodeIcon,
-  FileIcon,
-  FileTextIcon,
-  FolderIcon,
-  Frame,
-  GalleryVerticalEnd,
-  HelpCircleIcon,
-  LayoutDashboardIcon,
-  ListIcon,
-  MapIcon,
-  PieChart,
+  CircleIcon,
+  FileBoxIcon,
+  HomeIcon,
+  LogInIcon,
+  Package2Icon,
+  PackageIcon,
   SettingsIcon,
+  TextCursorIcon,
+  UserPlusIcon,
   UsersIcon,
 } from "lucide-react";
 import type * as React from "react";
 
 import { NavMain } from "./nav-main.tsx";
 import { NavSecondary } from "./nav-secondary.tsx";
-import { TeamSwitcher } from "./team-switcher.tsx";
+import { NavUser } from "./nav-user.tsx";
 
 const data = {
   user: {
-    name: "shadcn",
+    name: "Toby Belhome",
     email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
+    avatar: "https://www.tobybelhome.com/toby-belhome.png",
   },
   navMain: [
     {
       title: "Dashboard",
-      url: "#",
-      icon: LayoutDashboardIcon,
+      url: "/dashboard",
+      icon: HomeIcon,
     },
     {
-      title: "Lifecycle",
-      url: "#",
-      icon: ListIcon,
-    },
-    {
-      title: "Analytics",
-      url: "#",
-      icon: BarChartIcon,
-    },
-    {
-      title: "Projects",
-      url: "#",
-      icon: FolderIcon,
-    },
-    {
-      title: "Team",
-      url: "#",
+      title: "Users",
+      url: "/dashboard/users",
       icon: UsersIcon,
     },
+    {
+      title: "Settings",
+      url: "/dashboard/settings",
+      icon: SettingsIcon,
+    },
+    {
+      title: "Login",
+      url: "/login",
+      icon: LogInIcon,
+    },
+    {
+      title: "Register",
+      url: "/register",
+      icon: UserPlusIcon,
+    },
+    {
+      title: "404 Page",
+      url: "/404-page",
+      icon: PackageIcon,
+    },
+    {
+      title: "500 Page",
+      url: "/500-page",
+      icon: Package2Icon,
+    },
   ],
   navClouds: [
     {
@@ -83,7 +88,7 @@ const data = {
     },
     {
       title: "Proposal",
-      icon: FileTextIcon,
+      icon: FileBoxIcon,
       url: "#",
       items: [
         {
@@ -98,7 +103,7 @@ const data = {
     },
     {
       title: "Prompts",
-      icon: FileCodeIcon,
+      icon: TextCursorIcon,
       url: "#",
       items: [
         {
@@ -114,111 +119,19 @@ const data = {
   ],
   navSecondary: [
     {
-      title: "Ajustes",
-      url: "#",
-      icon: SettingsIcon,
+      title: "Get Pro",
+      url: "https://shadcnuikit.com/pricing",
+      icon: CircleIcon,
     },
     {
-      title: "Soporte",
-      url: "#",
-      icon: HelpCircleIcon,
-    },
-  ],
-  documents: [
-    {
-      name: "Data Library",
-      url: "#",
-      icon: DatabaseIcon,
+      title: "Shadcn UI Kit",
+      url: "https://shadcnuikit.com/",
+      icon: CircleIcon,
     },
     {
-      name: "Reports",
-      url: "#",
-      icon: ClipboardListIcon,
-    },
-    {
-      name: "Word Assistant",
-      url: "#",
-      icon: FileIcon,
-    },
-  ],
-};
-
-// This is sample data.
-const data2 = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  teams: [
-    {
-      name: "Acme Inc",
-      logo: GalleryVerticalEnd,
-      plan: "Enterprise",
-    },
-  ],
-  navMain: [
-    /*{
-      title: "Inicio",
-      url: "/",
-      icon: HomeIcon,
-      isActive: true,
-    },*/
-    {
-      title: "Clientes",
-      icon: UsersIcon,
-      isActive: true,
-      items: [
-        {
-          title: "Listado de clientes",
-          url: "/customers",
-        },
-        /*{
-          title: "Añadir un cliente",
-          url: "/customers/create",
-        },*/
-      ],
-    },
-    {
-      title: "Facturas proforma",
-      icon: FileTextIcon,
-      items: [
-        {
-          title: "Listado de proformas",
-          url: "/proformas",
-        },
-        /*{
-          title: "Enviar a Veri*Factu",
-          url: "#",
-        },*/
-      ],
-    },
-    {
-      title: "Facturas de cliente",
-      icon: FileCheckIcon,
-      items: [
-        {
-          title: "Listado de facturas",
-          url: "/customer-invoices",
-        },
-      ],
-    },
-  ],
-  projects: [
-    {
-      name: "Design Engineering",
-      url: "#",
-      icon: Frame,
-    },
-    {
-      name: "Sales & Marketing",
-      url: "#",
-      icon: PieChart,
-    },
-    {
-      name: "Travel",
-      url: "#",
-      icon: MapIcon,
+      title: "Bundui Component",
+      url: "https://bundui.io",
+      icon: CircleIcon,
     },
   ],
 };
@@ -226,18 +139,29 @@ const data2 = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar collapsible="icon" {...props}>
-      <SidebarHeader className="mb-3">
-        <TeamSwitcher teams={data2.teams} />
-        {/*<SearchForm />*/}
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+              <a href="#">
+                <img
+                  alt="shadcn ui kit svg logo"
+                  className="size-6 rounded-sm group-data-[collapsible=icon]:size-5"
+                  src="https://shadcnuikit.com/logo.png"
+                />
+                <span className="text-base font-medium">Shadcn UI Kit</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <NavMain items={data2.navMain} />
+        <NavMain items={data.navMain} />
+        <NavSecondary className="mt-auto" items={data.navSecondary} />
       </SidebarContent>
       <SidebarFooter>
-        <NavSecondary className="mt-auto" items={data.navSecondary} />
-        {/*<NavUser user={data.user} />*/}
+        <NavUser user={data.user} />
       </SidebarFooter>
-      <SidebarRail />
     </Sidebar>
   );
 }

packages/rdx-ui/src/components/layout/site-header.tsx

@@ -0,0 +1,235 @@
+import { Button, Separator, SidebarTrigger } from "@repo/shadcn-ui/components";
+import { Link } from "react-router-dom";
+
+export function SiteHeader() {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex h-(--header-height) shrink-0 items-center gap-2 border-b backdrop-blur-md transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) md:rounded-tl-xl md:rounded-tr-xl">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator className="mx-2 data-[orientation=vertical]:h-4" orientation="vertical" />
+        <div className="lg:flex-1">
+          <div className="relative hidden max-w-sm flex-1 lg:block">
+            <svg
+              aria-hidden="true"
+              className="lucide lucide-search text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="m21 21-4.34-4.34" />
+              <circle cx="11" cy="11" r="8" />
+            </svg>
+
+            <input
+              className="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-w-0 bg-transparent px-3 py-1 transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 w-full cursor-pointer rounded-md border pr-4 pl-10 text-sm shadow-xs"
+              data-slot="input"
+              placeholder="Search..."
+              type="search"
+            />
+            <div className="absolute top-1/2 right-2 hidden -translate-y-1/2 items-center gap-0.5 rounded-sm bg-zinc-200 p-1 font-mono text-xs font-medium sm:flex dark:bg-neutral-700">
+              <svg
+                aria-hidden="true"
+                className="lucide lucide-command size-3"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+              </svg>
+              <span>k</span>
+            </div>
+          </div>
+          <div className="block lg:hidden">
+            <button
+              className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9"
+              data-size="icon"
+              data-slot="button"
+              data-variant="ghost"
+            >
+              <svg
+                aria-hidden="true"
+                className="lucide lucide-search"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="m21 21-4.34-4.34" />
+                <circle cx="11" cy="11" r="8" />
+              </svg>
+            </button>
+          </div>
+
+          <div
+            className="flex flex-col gap-2 text-center sm:text-left sr-only"
+            data-slot="dialog-header"
+          >
+            <h2
+              className="text-lg leading-none font-semibold"
+              data-slot="dialog-title"
+              id="radix-_R_rd5ubplbH1_"
+            >
+              Command Palette
+            </h2>
+            <p
+              className="text-muted-foreground text-sm"
+              data-slot="dialog-description"
+              id="radix-_R_rd5ubplbH2_"
+            >
+              Search for a command to run...
+            </p>
+          </div>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          <Button asChild className="hidden sm:flex" size="sm">
+            <Link
+              className="dark:text-foreground"
+              rel="noopener noreferrer"
+              target="_blank"
+              to="https://shadcnuikit.com/"
+            >
+              Get Pro
+            </Link>
+          </Button>
+        </div>
+
+        <div className="ml-auto flex items-center gap-2">
+          <a
+            className="inline-flex items-center justify-center whitespace-nowrap text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive underline-offset-4 hover:underline h-8 rounded-md gap-1.5 px-3 has-[&gt;svg]:px-2.5 relative animate-pulse bg-linear-to-r from-violet-600 via-fuchsia-600 to-cyan-600 bg-clip-text font-medium text-transparent hover:bg-transparent"
+            data-size="sm"
+            data-slot="button"
+            data-variant="link"
+            href="https://shadcnuikit.com/pricing"
+            rel="noopener"
+            target="_blank"
+          >
+            Get Pro
+          </a>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-8 relative"
+            data-size="icon-sm"
+            data-slot="dropdown-menu-trigger"
+            data-state="closed"
+            data-variant="ghost"
+            id="radix-_R_kd5ubplb_"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              className="lucide lucide-bell"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+              <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
+            </svg>
+            <span className="bg-destructive absolute end-0.5 top-0.5 block size-1.5 shrink-0 rounded-full" />
+          </button>
+          <button
+            className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-8 relative"
+            data-size="icon-sm"
+            data-slot="button"
+            data-variant="ghost"
+          >
+            <svg
+              aria-hidden="true"
+              className="lucide lucide-moon"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+            </svg>
+            <span className="sr-only">Toggle theme</span>
+          </button>
+          <button
+            aria-expanded="false"
+            aria-haspopup="menu"
+            className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-8"
+            data-size="icon-sm"
+            data-slot="dropdown-menu-trigger"
+            data-state="closed"
+            data-variant="ghost"
+            id="radix-_R_14d5ubplb_"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              className="lucide lucide-palette"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" />
+              <circle cx="13.5" cy="6.5" fill="currentColor" r=".5" />
+              <circle cx="17.5" cy="10.5" fill="currentColor" r=".5" />
+              <circle cx="6.5" cy="12.5" fill="currentColor" r=".5" />
+              <circle cx="8.5" cy="7.5" fill="currentColor" r=".5" />
+            </svg>
+          </button>
+          <div
+            className="bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px mx-2 data-[orientation=vertical]:h-4"
+            data-orientation="vertical"
+            data-slot="separator"
+            role="none"
+          />
+          <span
+            aria-expanded="false"
+            aria-haspopup="menu"
+            className="group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6"
+            data-size="default"
+            data-slot="dropdown-menu-trigger"
+            data-state="closed"
+            id="radix-_R_1kd5ubplb_"
+            type="button"
+          >
+            <img
+              alt="shadcn ui kit"
+              className="aspect-square size-full object-cover"
+              data-slot="avatar-image"
+              src="/images/avatars/01.png"
+            />
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}

packages/shadcn-ui/src/styles/globals.css

@@ -89,6 +89,11 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
   *,
   ::after,
   ::before,