@carlonicora/nextjs-jsonapi 3.24.2 → 3.26.0

package/src/features/company/components/details/CompanyContent.tsx

@@ -7,6 +7,7 @@ import { ReactNode } from "react";
 import { AttributeElement } from "../../../../components";
 import { SectionHeader, MicroLabel } from "../../../../components/typography";
 import { FiscalDataDisplay } from "../../../../components/fiscal/FiscalDataDisplay";
+import { cn } from "../../../../utils";
 import { CompanyInterface } from "../../data";
 
 type CompanyContentProps = {
@@ -34,7 +35,8 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
   return (
     <div className="flex flex-col gap-y-8">
       {/* Title Row */}
-      <div className="flex w-full items-center justify-between">
+      {/* Without actions the row only repeats the name the page header shows; hide it on a phone. */}
+      <div className={cn("flex w-full items-center justify-between", !actions && "max-md:hidden")}>
         <SectionHeader level={2}>{company.name}</SectionHeader>
         {actions && <div className="flex items-center gap-x-2">{actions}</div>}
       </div>

package/src/features/company/components/details/CompanyDetails.tsx

@@ -17,7 +17,15 @@ export function CompanyDetails() {
 
   return (
     <div className="flex w-full flex-col gap-y-2">
-      <ContentTitle module={Modules.Company} type={title.type} element={title.element} functions={title.functions} />
+      {/* On a phone the page header already shows the type, the name and the
+          commands, so this inner copy is hidden there. */}
+      <ContentTitle
+        module={Modules.Company}
+        type={title.type}
+        element={title.element}
+        functions={title.functions}
+        className="max-md:hidden"
+      />
       <TokenStatusIndicator size="md" />
       <CompanyContent company={company} />
     </div>

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -12,6 +12,12 @@ interface TokenStatusIndicatorProps {
   className?: string;
   size?: "sm" | "md" | "lg";
   showExtraPages?: boolean;
+  /**
+   * Render the indicator as a link to this URL instead of a hover tooltip.
+   * For touch surfaces (the mobile header), where a hover tooltip never opens:
+   * the link carries a 40px tap area and leads to the usage page.
+   */
+  href?: string;
 }
 
 /**
@@ -36,7 +42,12 @@ const asWholeCredits = (value: number): string => Math.trunc(value).toLocaleStri
  * - BatteryLow: 5-25% available
  * - Battery (empty): <5% available
  */
-export function TokenStatusIndicator({ className, size = "md", showExtraPages = true }: TokenStatusIndicatorProps) {
+export function TokenStatusIndicator({
+  className,
+  size = "md",
+  showExtraPages = true,
+  href,
+}: TokenStatusIndicatorProps) {
   const { company } = useCurrentUserContext();
   const t = useTranslations();
 
@@ -131,6 +142,35 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
     </div>
   );
 
+  const badge = (
+    <>
+      {getBatteryIcon()}
+      <span className={cn(textSize, "text-muted-foreground font-medium leading-none")}>
+        {asWholeCredits(availableMonthlyCredits)}
+      </span>
+      {showExtraPages && availableExtraCredits > 0 && (
+        <span className="inline-flex items-center gap-0.5">
+          <PlusCircle className={cn(smallIconSize, "text-blue-500")} />
+          <span className={cn(textSize, "text-blue-500 font-medium leading-none")}>
+            {asWholeCredits(availableExtraCredits)}
+          </span>
+        </span>
+      )}
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={cn("inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 px-1", className)}
+        aria-label={t("billing.tokens.status", { defaultValue: "Page Status" })}
+      >
+        {badge}
+      </Link>
+    );
+  }
+
   return (
     <Tooltip>
       {/* The layout classes live on the trigger itself, which renders the
@@ -142,18 +182,7 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
         className={cn("inline-flex items-center gap-1.5 cursor-default", className)}
         aria-label={t("billing.tokens.status", { defaultValue: "Page Status" })}
       >
-        {getBatteryIcon()}
-        <span className={cn(textSize, "text-muted-foreground font-medium leading-none")}>
-          {asWholeCredits(availableMonthlyCredits)}
-        </span>
-        {showExtraPages && availableExtraCredits > 0 && (
-          <span className="inline-flex items-center gap-0.5">
-            <PlusCircle className={cn(smallIconSize, "text-blue-500")} />
-            <span className={cn(textSize, "text-blue-500 font-medium leading-none")}>
-              {asWholeCredits(availableExtraCredits)}
-            </span>
-          </span>
-        )}
+        {badge}
       </TooltipTrigger>
       <TooltipContent side="top" className="max-w-xs">
         {tooltipContent}

package/src/features/help/components/HelpHeader.tsx

@@ -16,14 +16,16 @@ export function HelpHeader() {
   const appHref = brand?.appHref ?? "/";
 
   return (
-    <header className="border-border bg-background flex items-center justify-between border-b px-4 py-3">
-      <Link href="/help" className="flex items-center gap-2">
-        {logo ? <Image src={logo} alt={label} width={28} height={28} /> : null}
-        <span className="text-base font-semibold">
+    <header className="border-border bg-background flex items-center justify-between border-b px-4 py-3 max-md:gap-2">
+      {/* Phone: the title shrinks and the "· Help & Documentation" suffix
+          truncates with an ellipsis instead of wrapping onto a second line. */}
+      <Link href="/help" className="flex items-center gap-2 max-md:min-w-0">
+        {logo ? <Image src={logo} alt={label} width={28} height={28} className="max-md:shrink-0" /> : null}
+        <span className="text-base font-semibold max-md:truncate">
           {label} · {t("help.footerLink")}
         </span>
       </Link>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 max-md:shrink-0">
         <HelpAskAi />
         {/* Styled Links, not <Button render={<Link/>} nativeButton={false}>. Base UI's
             Button primitive warns when rendered as a non-button, and nativeButton={false}

package/src/features/tokenusage/components/TokenUsageAdminFilterBar.tsx

@@ -41,12 +41,15 @@ export function TokenUsageAdminFilterBar({ granularity, companyId, metric, compa
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <DateRangeSelector
-        onDateChange={(range) => {
-          if (!range?.from || !range?.to) return;
-          onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
-        }}
-      />
+      {/* The date button is a fixed 300px; on a phone it takes the full row instead. */}
+      <div className="max-md:w-full max-md:[&_#date]:w-full">
+        <DateRangeSelector
+          onDateChange={(range) => {
+            if (!range?.from || !range?.to) return;
+            onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
+          }}
+        />
+      </div>
 
       <Segmented
         ariaLabel={t("token_usage.admin.granularity.label")}

package/src/features/tokenusage/lib/__tests__/formatters.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { createUsageFormatters } from "../formatters";
+
+describe("createUsageFormatters.compact", () => {
+  const { compact } = createUsageFormatters("en-US", "EUR");
+
+  it("keeps sub-unit axis ticks distinct", () => {
+    const ticks = [0, 0.05, 0.1, 0.15, 0.2, 0.25];
+    const labels = ticks.map(compact);
+    expect(labels).toEqual(["0", "0.05", "0.1", "0.15", "0.2", "0.25"]);
+    expect(new Set(labels).size).toBe(ticks.length);
+  });
+
+  it("keeps thousands ticks distinct and exact", () => {
+    expect([0, 250, 500, 750, 1000, 1250].map(compact)).toEqual(["0", "250", "500", "750", "1K", "1.25K"]);
+  });
+
+  it("still abbreviates large values", () => {
+    expect(compact(1500000)).toBe("1.5M");
+  });
+});

package/src/features/tokenusage/lib/formatters.ts

@@ -50,7 +50,11 @@ export function createUsageFormatters(locale: string, currency: string): UsageFo
 
   const dayFormat = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", timeZone: "UTC" });
   const monthFormat = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" });
-  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
+  // Axis ticks step by 1, 2, 2.5 or 5 times a power of ten, so a tick never needs
+  // more than three significant digits. A fixed one-decimal cap rounded a 0.05
+  // step into repeated labels (0.1, 0.1, 0.2, 0.2); significant digits keep every
+  // tick distinct at any scale (0.05, 0.15, 1.25K).
+  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumSignificantDigits: 3 });
   const collator = new Intl.Collator(locale);
 
   return {

package/src/features/waitlist/components/lists/WaitlistList.tsx

@@ -1,68 +1,52 @@
 "use client";
 
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { RefreshCw, Users } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { errorToast } from "../../../../components";
-import { SectionHeader } from "../../../../components/typography";
-import {
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../../../shadcnui";
+import { useMemo, useState } from "react";
+import { ContentListTable, errorToast } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever } from "../../../../hooks";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../shadcnui";
 import { showToast } from "../../../../utils/toast";
+import { WaitlistFields } from "../../data/waitlist.fields";
 import { WaitlistInterface } from "../../data/WaitlistInterface";
 import { WaitlistService } from "../../data/WaitlistService";
-import { useWaitlistTableStructure } from "../../hooks/useWaitlistTableStructure";
 
-export function WaitlistList() {
+type WaitlistListProps = {
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell.
+   */
+  fullWidth?: boolean;
+};
+
+export function WaitlistList({ fullWidth }: WaitlistListProps = {}) {
   const t = useTranslations();
-  const [entries, setEntries] = useState<WaitlistInterface[]>([]);
-  const [total, setTotal] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
   const [statusFilter, setStatusFilter] = useState<string>("all");
 
-  const loadEntries = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await WaitlistService.findMany({
-        status: statusFilter === "all" ? undefined : statusFilter,
-        fetchAll: true,
-      });
-      setEntries(result);
-      setTotal(result.length);
-    } catch (error) {
-      errorToast({ error });
-    } finally {
-      setIsLoading(false);
-    }
-  }, [statusFilter]);
-
-  useEffect(() => {
-    loadEntries();
-  }, [loadEntries]);
+  const data: DataListRetriever<WaitlistInterface> = useDataListRetriever({
+    retriever: (params) => WaitlistService.findMany(params),
+    retrieverParams: {},
+    module: Modules.Waitlist,
+  });
 
   const handleInvite = async (entry: WaitlistInterface) => {
     try {
       await WaitlistService.invite(entry.id);
       showToast(t("waitlist.admin.invite_sent", { email: entry.email }));
-      loadEntries();
+      void data.refresh();
     } catch (error) {
       errorToast({ error });
     }
   };
 
-  const columns = useWaitlistTableStructure({ onInvite: handleInvite });
+  const handleStatusChange = (value: string | null) => {
+    const status = value ?? "all";
+    setStatusFilter(status);
+    data.addAdditionalParameter("status", status === "all" ? null : status);
+  };
 
   const statusItems = useMemo(
     () => ({
@@ -75,83 +59,46 @@ export function WaitlistList() {
     [t],
   );
 
-  const table = useReactTable({
-    data: entries,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Users className="h-5 w-5" />
-          <SectionHeader level={2}>{t("waitlist.admin.title")}</SectionHeader>
-          <span className="text-muted-foreground">({t("waitlist.admin.entries_count", { count: total })})</span>
-        </div>
-
-        <div className="flex items-center gap-4">
-          {/* Status Filter */}
-          <Select items={statusItems} value={statusFilter} onValueChange={(value) => setStatusFilter(value ?? "all")}>
-            <SelectTrigger className="w-40">
-              <SelectValue placeholder={t("waitlist.admin.filter_placeholder")} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t("waitlist.admin.all_statuses")}</SelectItem>
-              <SelectItem value="pending">{t("waitlist.admin.status.pending")}</SelectItem>
-              <SelectItem value="confirmed">{t("waitlist.admin.status.confirmed")}</SelectItem>
-              <SelectItem value="invited">{t("waitlist.admin.status.invited")}</SelectItem>
-              <SelectItem value="registered">{t("waitlist.admin.status.registered")}</SelectItem>
-            </SelectContent>
-          </Select>
+  const filters = (
+    <div className="flex items-center gap-4">
+      <Select items={statusItems} value={statusFilter} onValueChange={handleStatusChange}>
+        <SelectTrigger className="w-40">
+          <SelectValue placeholder={t("waitlist.admin.filter_placeholder")} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{t("waitlist.admin.all_statuses")}</SelectItem>
+          <SelectItem value="pending">{t("waitlist.admin.status.pending")}</SelectItem>
+          <SelectItem value="confirmed">{t("waitlist.admin.status.confirmed")}</SelectItem>
+          <SelectItem value="invited">{t("waitlist.admin.status.invited")}</SelectItem>
+          <SelectItem value="registered">{t("waitlist.admin.status.registered")}</SelectItem>
+        </SelectContent>
+      </Select>
 
-          {/* Refresh Button */}
-          <Button variant="outline" size="icon" onClick={loadEntries} disabled={isLoading}>
-            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
-          </Button>
-        </div>
-      </div>
-
-      {/* Table */}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {isLoading ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {t("waitlist.admin.loading")}
-                </TableCell>
-              </TableRow>
-            ) : entries.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {t("waitlist.admin.empty")}
-                </TableCell>
-              </TableRow>
-            ) : (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
-                  ))}
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
+      <Button variant="outline" size="icon" onClick={() => void data.refresh()} disabled={!data.isLoaded}>
+        <RefreshCw className={`h-4 w-4 ${!data.isLoaded ? "animate-spin" : ""}`} />
+      </Button>
     </div>
   );
+
+  return (
+    <ContentListTable
+      data={data}
+      fields={[
+        WaitlistFields.email,
+        WaitlistFields.status,
+        WaitlistFields.createdAt,
+        WaitlistFields.questionnaire,
+        WaitlistFields.actions,
+      ]}
+      tableGeneratorType={Modules.Waitlist}
+      title={t("waitlist.admin.title")}
+      filters={filters}
+      /* The waitlist endpoint takes no search term, so rendering the box would
+         give the page a control that silently does nothing. */
+      allowSearch={false}
+      context={{ onInvite: handleInvite }}
+      fullWidth={fullWidth}
+      emptyState={t("waitlist.admin.empty")}
+    />
+  );
 }

package/src/features/waitlist/data/WaitlistService.ts

@@ -42,7 +42,7 @@ export class WaitlistService extends AbstractService {
     search?: string;
     fetchAll?: boolean;
     next?: NextRef;
-    prev?: PreviousRef;
+    previous?: PreviousRef;
   }): Promise<WaitlistInterface[]> {
     const endpoint = new EndpointCreator({ endpoint: Modules.Waitlist });
 
@@ -55,7 +55,7 @@ export class WaitlistService extends AbstractService {
       method: HttpMethod.GET,
       endpoint: endpoint.generate(),
       next: params?.next,
-      previous: params?.prev,
+      previous: params?.previous,
     });
   }
 

package/src/features/waitlist/data/index.ts

@@ -3,3 +3,4 @@ export * from "./Waitlist";
 export * from "./WaitlistService";
 export * from "./waitlist-stats.interface";
 export * from "./waitlist-stats";
+export * from "./waitlist.fields";

package/src/features/waitlist/data/waitlist.fields.ts

@@ -0,0 +1,8 @@
+export enum WaitlistFields {
+  waitlistId = "waitlistId",
+  email = "email",
+  status = "status",
+  createdAt = "createdAt",
+  questionnaire = "questionnaire",
+  actions = "actions",
+}

package/src/features/waitlist/hooks/useWaitlistTableStructure.tsx

@@ -3,13 +3,12 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { Send } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { TableContent, UseTableStructureHook } from "../../../hooks";
 import { Badge, Button } from "../../../shadcnui";
+import { WaitlistFields } from "../data/waitlist.fields";
 import { WaitlistInterface, WaitlistStatus } from "../data/WaitlistInterface";
 
-interface UseWaitlistTableStructureProps {
-  onInvite: (entry: WaitlistInterface) => void;
-}
-
 /**
  * Parse questionnaire JSON string safely
  */
@@ -22,10 +21,25 @@ function parseQuestionnaire(questionnaire: string | undefined): Record<string, a
   }
 }
 
-export function useWaitlistTableStructure({
-  onInvite,
-}: UseWaitlistTableStructureProps): ColumnDef<WaitlistInterface>[] {
+/**
+ * Columns for the administrative waitlist. The invite action needs the list's
+ * own handler, so WaitlistList passes it through ContentListTable's `context`
+ * as `onInvite`.
+ */
+export const useWaitlistTableStructure: UseTableStructureHook<WaitlistInterface, WaitlistFields> = (params) => {
   const t = useTranslations();
+  const onInvite: ((entry: WaitlistInterface) => void) | undefined = params.context?.onInvite;
+
+  const tableData = useMemo(() => {
+    return params.data.map((entry: WaitlistInterface) => {
+      const row: TableContent<WaitlistInterface> = { jsonApiData: entry };
+      row[WaitlistFields.waitlistId] = entry.id;
+      params.fields.forEach((field) => {
+        row[field] = (entry as any)[field as keyof WaitlistInterface];
+      });
+      return row;
+    });
+  }, [params.data, params.fields]);
 
   const getStatusBadge = (status: WaitlistStatus) => {
     const variants: Record<WaitlistStatus, { variant: "default" | "secondary" | "outline" | "destructive" }> = {
@@ -39,31 +53,44 @@ export function useWaitlistTableStructure({
     return <Badge variant={config.variant}>{t(`waitlist.admin.status.${status}`)}</Badge>;
   };
 
-  return [
-    {
+  const fieldColumnMap: Partial<Record<WaitlistFields, () => any>> = {
+    [WaitlistFields.email]: () => ({
+      id: "email",
       accessorKey: "email",
       header: t("waitlist.admin.columns.email"),
-      cell: ({ row }) => <span className="font-medium">{row.original.email}</span>,
-    },
-    {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => (
+        <span className="font-medium">{row.original.jsonApiData.email}</span>
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.status]: () => ({
+      id: "status",
       accessorKey: "status",
       header: t("waitlist.admin.columns.status"),
-      cell: ({ row }) => getStatusBadge(row.original.status),
-    },
-    {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => getStatusBadge(row.original.jsonApiData.status),
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.createdAt]: () => ({
+      id: "createdAt",
       accessorKey: "createdAt",
       header: t("waitlist.admin.columns.submitted"),
-      cell: ({ row }) => {
-        if (!row.original.createdAt) return "-";
-        return new Date(row.original.createdAt).toLocaleDateString();
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
+        const entry: WaitlistInterface = row.original.jsonApiData;
+        if (!entry.createdAt) return "-";
+        return new Date(entry.createdAt).toLocaleDateString();
       },
-    },
-    {
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.questionnaire]: () => ({
+      id: "questionnaire",
       accessorKey: "questionnaire",
       header: t("waitlist.admin.columns.questionnaire"),
-      cell: ({ row }) => {
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
         // IMPORTANT: Parse JSON string from backend
-        const questionnaire = parseQuestionnaire(row.original.questionnaire);
+        const questionnaire = parseQuestionnaire(row.original.jsonApiData.questionnaire);
         if (!questionnaire || Object.keys(questionnaire).length === 0) {
           return <span className="text-muted-foreground">-</span>;
         }
@@ -84,16 +111,18 @@ export function useWaitlistTableStructure({
           </details>
         );
       },
-    },
-    {
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [WaitlistFields.actions]: () => ({
       id: "actions",
       header: t("waitlist.admin.columns.actions"),
-      cell: ({ row }) => {
-        const entry = row.original;
+      cell: ({ row }: { row: TableContent<WaitlistInterface> }) => {
+        const entry: WaitlistInterface = row.original.jsonApiData;
 
         if (entry.status === "confirmed") {
           return (
-            <Button size="sm" variant="outline" onClick={() => onInvite(entry)}>
+            <Button size="sm" variant="outline" onClick={() => onInvite?.(entry)}>
               <Send className="me-2 h-4 w-4" />
               {t("waitlist.admin.actions.invite")}
             </Button>
@@ -116,6 +145,16 @@ export function useWaitlistTableStructure({
           <span className="text-muted-foreground text-sm">{t("waitlist.admin.actions.awaiting_confirmation")}</span>
         );
       },
-    },
-  ];
-}
+      enableSorting: false,
+      enableHiding: false,
+    }),
+  };
+
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<WaitlistInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t]);
+
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};

package/src/shadcnui/ui/button.tsx

@@ -21,7 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+          "h-7 max-md:h-9 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",
         sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
         lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",

package/src/shadcnui/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 max-md:after:-inset-y-3 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}