@spaceinvoices/react-ui 0.4.1 → 0.4.3

package/src/components/recurring-invoices/list/locales/pt.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nome",
+  Frequency: "Frequência",
+  Status: "Estado",
+  "Next Run": "Próxima execução",
+  Generated: "Geradas",
+  Created: "Criado",
+  Every: "A cada",
+  Actions: "Ações",
+  "Open menu": "Abrir menu",
+  "View source invoice": "Ver fatura de origem",
+  Pause: "Pausar",
+  Resume: "Retomar",
+  "Processing...": "Processando...",
+  "Delete schedule": "Eliminar agendamento",
+  "Deleting...": "Eliminando...",
+  "frequency.daily": "Diário",
+  "frequency.weekly": "Semanal",
+  "frequency.monthly": "Mensal",
+  "frequency.yearly": "Anual",
+  "status.active": "Ativo",
+  "status.paused": "Pausado",
+  "status.completed": "Concluído",
+  "Your list is empty": "A sua lista de faturas recorrentes está vazia",
+  "Get started by creating your first entry": "Comece criando o seu primeiro agendamento recorrente",
+  "No results found": "Nenhuma fatura recorrente encontrada",
+} as const;

package/src/components/recurring-invoices/list/locales/sl.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Ime",
+  Frequency: "Pogostost",
+  Status: "Status",
+  "Next Run": "Naslednje izvajanje",
+  Generated: "Ustvarjeno",
+  Created: "Ustvarjeno",
+  Every: "Vsak",
+  Actions: "Akcije",
+  "Open menu": "Odpri meni",
+  "View source invoice": "Prikaži izvorni račun",
+  Pause: "Zaustavi",
+  Resume: "Nadaljuj",
+  "Processing...": "Obdelujem...",
+  "Delete schedule": "Izbriši urnik",
+  "Deleting...": "Brišem...",
+  "frequency.daily": "Dnevno",
+  "frequency.weekly": "Tedensko",
+  "frequency.monthly": "Mesečno",
+  "frequency.yearly": "Letno",
+  "status.active": "Aktiven",
+  "status.paused": "Zaustavljen",
+  "status.completed": "Zaključen",
+  "Your list is empty": "Vaš seznam ponavljajočih računov je prazen",
+  "Get started by creating your first entry": "Začnite z ustvarjanjem prvega ponavljajočega urnika",
+  "No results found": "Ni najdenih ponavljajočih računov",
+} as const;

package/src/components/recurring-invoices/recurring-invoices.hooks.ts

@@ -0,0 +1,28 @@
+import type { CreateRecurringInvoiceBody, RecurringInvoice } from "@spaceinvoices/js-sdk";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+
+export const RECURRING_INVOICES_CACHE_KEY = "recurring-invoices";
+
+const {
+  useCreateResource: useCreateRecurringInvoice,
+  useUpdateResource: useUpdateRecurringInvoice,
+  useDeleteResource: useDeleteRecurringInvoice,
+  useRestoreResource: useRestoreRecurringInvoice,
+  usePermanentDeleteResource: usePermanentDeleteRecurringInvoice,
+} = createResourceHooks<RecurringInvoice, CreateRecurringInvoiceBody>(
+  "recurringInvoices",
+  RECURRING_INVOICES_CACHE_KEY,
+  {
+    restoreMethodName: "restoreRecurringInvoice",
+    permanentDeleteMethodName: "permanentDeleteRecurringInvoice",
+  },
+);
+
+export {
+  useCreateRecurringInvoice,
+  useUpdateRecurringInvoice,
+  useDeleteRecurringInvoice,
+  useRestoreRecurringInvoice,
+  usePermanentDeleteRecurringInvoice,
+};

package/src/components/table/data-table.tsx

@@ -1,6 +1,7 @@
 import type { JSX, ReactNode } from "react";
-import { Fragment, memo, useState } from "react";
+import { Fragment, memo, useCallback, useMemo, useState } from "react";
 
+import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
 import { FilterBar } from "./filter-bar";
 import { useTableQuery } from "./hooks/use-table-query";
@@ -47,6 +48,14 @@ export type DataTableProps<T> = {
   t?: (key: string) => string;
   /** Locale for date formatting */
   locale?: string;
+  /** Enable row selection with checkboxes */
+  selectable?: boolean;
+  /** Currently selected IDs (controlled) */
+  selectedIds?: Set<string>;
+  /** Callback when selection changes */
+  onSelectionChange?: (selectedIds: Set<string>) => void;
+  /** Content to render in selection toolbar (shown when items selected) */
+  selectionToolbar?: (selectedCount: number) => ReactNode;
 };
 
 /**
@@ -70,6 +79,10 @@ export function DataTable<T extends { id: string }>({
   filterConfig,
   t = (key) => key,
   locale,
+  selectable,
+  selectedIds,
+  onSelectionChange,
+  selectionToolbar,
 }: DataTableProps<T>) {
   // Filter panel open state - starts open if filters are active in URL
   const hasInitialFilters = Boolean(
@@ -108,6 +121,43 @@ export function DataTable<T extends { id: string }>({
       params.filter_http_status,
   );
 
+  // Selection helpers
+  const pageIds = useMemo(() => data.map((item) => item.id), [data]);
+  const selectedCount = selectedIds?.size ?? 0;
+  const allPageSelected = selectable && pageIds.length > 0 && pageIds.every((id) => selectedIds?.has(id));
+  const somePageSelected = selectable && pageIds.some((id) => selectedIds?.has(id));
+
+  const handleToggleAll = useCallback(() => {
+    if (!onSelectionChange || !selectedIds) return;
+    const next = new Set(selectedIds);
+    if (allPageSelected) {
+      // Deselect all on current page
+      for (const id of pageIds) {
+        next.delete(id);
+      }
+    } else {
+      // Select all on current page
+      for (const id of pageIds) {
+        next.add(id);
+      }
+    }
+    onSelectionChange(next);
+  }, [onSelectionChange, selectedIds, allPageSelected, pageIds]);
+
+  const handleToggleRow = useCallback(
+    (id: string) => {
+      if (!onSelectionChange || !selectedIds) return;
+      const next = new Set(selectedIds);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      onSelectionChange(next);
+    },
+    [onSelectionChange, selectedIds],
+  );
+
   // Show skeleton during initial load (with filter bar for consistency)
   if (isFetching && !queryResult) {
     return (
@@ -123,7 +173,7 @@ export function DataTable<T extends { id: string }>({
           isOpen={filterPanelOpen}
           onToggle={setFilterPanelOpen}
         />
-        <TableSkeleton columns={columns.length} rows={10} />
+        <TableSkeleton columns={columns.length + (selectable ? 1 : 0)} rows={10} />
       </div>
     );
   }
@@ -155,12 +205,26 @@ export function DataTable<T extends { id: string }>({
         onToggle={setFilterPanelOpen}
       />
 
+      {selectable && selectedCount > 0 && selectionToolbar && (
+        <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
+          {selectionToolbar(selectedCount)}
+        </div>
+      )}
+
       <div className="rounded-lg border">
         <Table>
           {renderHeader ? (
             renderHeader({ orderBy: params.order_by, onSort: handleSort })
           ) : (
-            <DefaultTableHeader columns={columns} orderBy={params.order_by} onSort={handleSort} />
+            <DefaultTableHeader
+              columns={columns}
+              orderBy={params.order_by}
+              onSort={handleSort}
+              selectable={selectable}
+              allPageSelected={allPageSelected}
+              somePageSelected={somePageSelected}
+              onToggleAll={handleToggleAll}
+            />
           )}
 
           <TableBody>
@@ -172,7 +236,17 @@ export function DataTable<T extends { id: string }>({
                 }
 
                 // Default row renderer
-                return <DefaultTableRow key={item.id} item={item} columns={columns} onRowClick={onRowClick} />;
+                return (
+                  <DefaultTableRow
+                    key={item.id}
+                    item={item}
+                    columns={columns}
+                    onRowClick={onRowClick}
+                    selectable={selectable}
+                    isSelected={selectedIds?.has(item.id)}
+                    onToggleSelect={handleToggleRow}
+                  />
+                );
               })
             ) : (
               <TableNoResults resource={resourceName} search={handleSearch} t={t} />
@@ -199,14 +273,31 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   columns,
   orderBy,
   onSort,
+  selectable,
+  allPageSelected,
+  somePageSelected,
+  onToggleAll,
 }: {
   columns: Column<T>[];
   orderBy?: string;
   onSort?: (order: string | null) => void;
+  selectable?: boolean;
+  allPageSelected?: boolean;
+  somePageSelected?: boolean;
+  onToggleAll?: () => void;
 }) {
   return (
     <TableHeader>
       <TableRow>
+        {selectable && (
+          <TableHead className="w-[40px]">
+            <Checkbox
+              checked={allPageSelected || false}
+              indeterminate={!allPageSelected && somePageSelected}
+              onCheckedChange={onToggleAll}
+            />
+          </TableHead>
+        )}
         {columns.map((column) => (
           <TableHead key={column.id} className={column.className} style={{ textAlign: column.align }}>
             {column.sortable ? (
@@ -226,7 +317,15 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
       </TableRow>
     </TableHeader>
   );
-}) as <T>(props: { columns: Column<T>[]; orderBy?: string; onSort?: (order: string | null) => void }) => JSX.Element;
+}) as <T>(props: {
+  columns: Column<T>[];
+  orderBy?: string;
+  onSort?: (order: string | null) => void;
+  selectable?: boolean;
+  allPageSelected?: boolean;
+  somePageSelected?: boolean;
+  onToggleAll?: () => void;
+}) => JSX.Element;
 
 /**
  * Default row renderer using column definitions
@@ -235,13 +334,28 @@ const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>(
   item,
   columns,
   onRowClick,
+  selectable,
+  isSelected,
+  onToggleSelect,
 }: {
   item: T;
   columns: Column<T>[];
   onRowClick?: (item: T) => void;
+  selectable?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }) {
   return (
     <TableRow className={onRowClick ? "cursor-pointer" : undefined} onClick={() => onRowClick?.(item)}>
+      {selectable && (
+        <TableCell className="w-[40px]">
+          <Checkbox
+            checked={isSelected || false}
+            onCheckedChange={() => onToggleSelect?.(item.id)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </TableCell>
+      )}
       {columns.map((column) => (
         <TableCell key={column.id} className={column.className} style={{ textAlign: column.align }}>
           {column.cell?.(item)}
@@ -253,4 +367,7 @@ const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>(
   item: T;
   columns: Column<T>[];
   onRowClick?: (item: T) => void;
+  selectable?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: (id: string) => void;
 }) => JSX.Element;

package/src/components/table/selection-toolbar.tsx

@@ -0,0 +1,36 @@
+import { FileDown, X } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+
+type SelectionToolbarProps = {
+  selectedCount: number;
+  onExportPdfs?: () => void;
+  onDeselectAll?: () => void;
+  t?: (key: string) => string;
+};
+
+export function SelectionToolbar({
+  selectedCount,
+  onExportPdfs,
+  onDeselectAll,
+  t = (key) => key,
+}: SelectionToolbarProps) {
+  return (
+    <>
+      <span className="font-medium text-sm">
+        {selectedCount} {t("selected")}
+      </span>
+      {onExportPdfs && (
+        <Button variant="outline" size="sm" onClick={onExportPdfs}>
+          <FileDown className="mr-1.5 size-4" />
+          {t("Export PDFs")}
+        </Button>
+      )}
+      {onDeselectAll && (
+        <Button variant="ghost" size="sm" onClick={onDeselectAll}>
+          <X className="mr-1.5 size-4" />
+          {t("Deselect all")}
+        </Button>
+      )}
+    </>
+  );
+}

package/src/components/tax-reports/kir-export-form.tsx

@@ -84,76 +84,96 @@ export function KirExportForm({ sdk, entityId, t, onSuccess, onError, onLoadingC
     }
   };
 
+  const fileName = `KIR_${year}_${periodType === "month" ? `M${month}` : `Q${quarter}`}.zip`;
+
   return (
     <div className="space-y-4">
-      {/* Year Selection */}
-      <div className="space-y-2">
-        <Label htmlFor="kir-year">{t("kir-export.year")}</Label>
-        <Select value={year.toString()} onValueChange={(v) => setYear(Number(v))}>
-          <SelectTrigger id="kir-year">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {yearOptions.map((y) => (
-              <SelectItem key={y} value={y.toString()}>
-                {y}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Period Type Selection */}
-      <div className="space-y-2">
-        <Label htmlFor="kir-period-type">{t("kir-export.period-type")}</Label>
-        <Select value={periodType} onValueChange={(v) => setPeriodType(v as PeriodType)}>
-          <SelectTrigger id="kir-period-type">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="month">{t("kir-export.period-types.month")}</SelectItem>
-            <SelectItem value="quarter">{t("kir-export.period-types.quarter")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* Month/Quarter Selection */}
-      {periodType === "month" ? (
+      {/* Year + Period Type + Month/Quarter */}
+      <div className="grid grid-cols-3 gap-4">
         <div className="space-y-2">
-          <Label htmlFor="kir-month">{t("kir-export.month")}</Label>
-          <Select value={month.toString()} onValueChange={(v) => setMonth(Number(v))}>
-            <SelectTrigger id="kir-month">
+          <Label htmlFor="kir-year">{t("kir-export.year")}</Label>
+          <Select value={year.toString()} onValueChange={(v) => setYear(Number(v))}>
+            <SelectTrigger id="kir-year">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
-                <SelectItem key={m} value={m.toString()}>
-                  {t(`kir-export.months.${m}`)}
+              {yearOptions.map((y) => (
+                <SelectItem key={y} value={y.toString()}>
+                  {y}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
-      ) : (
+
         <div className="space-y-2">
-          <Label htmlFor="kir-quarter">{t("kir-export.quarter")}</Label>
-          <Select value={quarter.toString()} onValueChange={(v) => setQuarter(Number(v))}>
-            <SelectTrigger id="kir-quarter">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {[1, 2, 3, 4].map((q) => (
-                <SelectItem key={q} value={q.toString()}>
-                  {t(`kir-export.quarters.${q}`)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <Label>{t("kir-export.period-type")}</Label>
+          <div className="flex rounded-md border">
+            <button
+              type="button"
+              onClick={() => setPeriodType("month")}
+              className={`flex-1 rounded-l-md px-3 py-2 font-medium text-sm transition-colors ${
+                periodType === "month" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+              }`}
+            >
+              {t("kir-export.period-types.month")}
+            </button>
+            <button
+              type="button"
+              onClick={() => setPeriodType("quarter")}
+              className={`flex-1 rounded-r-md border-l px-3 py-2 font-medium text-sm transition-colors ${
+                periodType === "quarter" ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+              }`}
+            >
+              {t("kir-export.period-types.quarter")}
+            </button>
+          </div>
         </div>
-      )}
+
+        {periodType === "month" ? (
+          <div className="space-y-2">
+            <Label htmlFor="kir-month">{t("kir-export.month")}</Label>
+            <Select value={month.toString()} onValueChange={(v) => setMonth(Number(v))}>
+              <SelectTrigger id="kir-month">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
+                  <SelectItem key={m} value={m.toString()}>
+                    {t(`kir-export.months.${m}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <Label htmlFor="kir-quarter">{t("kir-export.quarter")}</Label>
+            <Select value={quarter.toString()} onValueChange={(v) => setQuarter(Number(v))}>
+              <SelectTrigger id="kir-quarter">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {[1, 2, 3, 4].map((q) => (
+                  <SelectItem key={q} value={q.toString()}>
+                    {t(`kir-export.quarters.${q}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+
+      {/* File Preview */}
+      <div className="rounded-md border border-dashed p-3">
+        <p className="text-muted-foreground text-sm">
+          {t("kir-export.file-preview")}: <span className="font-medium font-mono text-foreground">{fileName}</span>
+        </p>
+      </div>
 
       {/* Export Button */}
-      <Button onClick={handleExport} disabled={isExporting} className="w-full">
+      <Button onClick={handleExport} disabled={isExporting} className="w-full" size="lg">
         {isExporting ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />

package/src/components/taxes/tax-list-table/tax-list-row-actions.tsx

@@ -12,14 +12,11 @@ import {
 
 type TaxListRowActionsProps = {
   tax: Tax;
+  onView?: (tax: Tax) => void;
   t: (key: string) => string;
 };
 
-export default function TaxListRowActions({ tax, t }: TaxListRowActionsProps) {
-  const handleViewTax = () => {
-    window.location.href = `/app/taxes/${tax.id}`;
-  };
-
+export default function TaxListRowActions({ tax, onView, t }: TaxListRowActionsProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -34,7 +31,7 @@ export default function TaxListRowActions({ tax, t }: TaxListRowActionsProps) {
           {t("Copy tax ID")}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="cursor-pointer" onClick={handleViewTax}>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => onView?.(tax)}>
           {t("View tax")}
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/components/taxes/tax-list-table/tax-list-row.tsx

@@ -8,10 +8,11 @@ import TaxListRowActions from "./tax-list-row-actions";
 type TaxListRowProps = {
   tax: Tax;
   onRowClick?: (tax: Tax) => void;
+  onView?: (tax: Tax) => void;
   t: (key: string) => string;
 };
 
-export default function TaxListRow({ tax, onRowClick, t }: TaxListRowProps) {
+export default function TaxListRow({ tax, onRowClick, onView, t }: TaxListRowProps) {
   const formatTaxRates = (taxRates: Tax["tax_rates"]) => {
     if (!taxRates || taxRates.length === 0) return "-";
     return taxRates.map((rate) => `${rate.rate}%`).join(", ");
@@ -39,7 +40,7 @@ export default function TaxListRow({ tax, onRowClick, t }: TaxListRowProps) {
       <TableCell>{formatTaxRates(tax.tax_rates)}</TableCell>
       <TableCell>{formatDate(tax.created_at)}</TableCell>
       <TableCell className="text-right">
-        <TaxListRowActions tax={tax} t={t} />
+        <TaxListRowActions tax={tax} onView={onView} t={t} />
       </TableCell>
     </TableRow>
   );

package/src/components/taxes/tax-list-table/tax-list-table.tsx

@@ -34,6 +34,7 @@ const translations = {
 
 type TaxListTableProps = {
   entityId?: string;
+  onView?: (tax: Tax) => void;
 } & ListTableProps<Tax> &
   ComponentTranslationProps;
 
@@ -41,6 +42,7 @@ export default function TaxListTable({
   queryParams,
   createNewTrigger,
   onRowClick,
+  onView,
   onChangeParams,
   entityId,
   ...i18nProps
@@ -61,7 +63,9 @@ export default function TaxListTable({
         { id: "created_at", header: t("Created"), sortable: true },
         { id: "actions", header: "", align: "right" },
       ]}
-      renderRow={(tax) => <TaxListRow tax={tax} key={tax.id} onRowClick={(tax) => onRowClick?.(tax)} t={t} />}
+      renderRow={(tax) => (
+        <TaxListRow tax={tax} key={tax.id} onRowClick={(tax) => onRowClick?.(tax)} onView={onView} t={t} />
+      )}
       renderHeader={(headerProps) => <TaxListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
       queryParams={queryParams}
       resourceName="tax"

package/src/components/ui/checkbox.tsx

@@ -1,14 +1,15 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
 import { cn } from "@/ui/lib/utils"
-import { CheckIcon } from "lucide-react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
-function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+function Checkbox({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props & { indeterminate?: boolean }) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
+      indeterminate={indeterminate}
       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/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer disabled:cursor-not-allowed 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/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[indeterminate]:bg-primary data-[indeterminate]:text-primary-foreground data-[indeterminate]:border-primary",
         className
       )}
       {...props}
@@ -17,8 +18,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
       >
-        <CheckIcon
-        />
+        {indeterminate ? <MinusIcon /> : <CheckIcon />}
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )