@tuturuuu/ui 0.30.1 → 0.30.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.30.2](https://github.com/tutur3u/platform/compare/ui-v0.30.1...ui-v0.30.2) (2026-08-31)
+
+
+### Bug Fixes
+
+* **finance:** allow advance subscription invoices ([d307068](https://github.com/tutur3u/platform/commit/d3070683a7c74b9f18f65dabdf482132fa02cf13))
+* **tasks:** restore description checklist controls ([7976f78](https://github.com/tutur3u/platform/commit/7976f78292237e8047509e4243dafa14acea1b54))
+
 ## [0.30.1](https://github.com/tutur3u/platform/compare/ui-v0.30.0...ui-v0.30.1) (2026-08-27)
 
 

package/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.10/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.11/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -57,36 +57,36 @@
     "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.23.0",
-    "@tanstack/react-query": "^5.101.2",
-    "@tanstack/react-table": "^9.0.0",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-table": "^9.2.3",
     "@tanstack/react-virtual": "^3.14.10",
-    "@tiptap/core": "3.30.2",
-    "@tiptap/extension-collaboration": "3.30.2",
-    "@tiptap/extension-collaboration-caret": "3.30.2",
-    "@tiptap/extension-color": "3.30.2",
-    "@tiptap/extension-details": "3.30.2",
-    "@tiptap/extension-drag-handle": "3.30.2",
-    "@tiptap/extension-drag-handle-react": "3.30.2",
-    "@tiptap/extension-highlight": "3.30.2",
-    "@tiptap/extension-horizontal-rule": "3.30.2",
-    "@tiptap/extension-image": "3.30.2",
-    "@tiptap/extension-link": "3.30.2",
-    "@tiptap/extension-list": "3.30.2",
-    "@tiptap/extension-node-range": "3.30.2",
-    "@tiptap/extension-placeholder": "3.30.2",
-    "@tiptap/extension-strike": "3.30.2",
-    "@tiptap/extension-subscript": "3.30.2",
-    "@tiptap/extension-superscript": "3.30.2",
-    "@tiptap/extension-table": "3.30.2",
-    "@tiptap/extension-table-cell": "3.30.2",
-    "@tiptap/extension-table-header": "3.30.2",
-    "@tiptap/extension-table-row": "3.30.2",
-    "@tiptap/extension-text-align": "3.30.2",
-    "@tiptap/extension-text-style": "3.30.2",
-    "@tiptap/extension-youtube": "3.30.2",
-    "@tiptap/pm": "3.30.2",
-    "@tiptap/react": "3.30.2",
-    "@tiptap/starter-kit": "3.30.2",
+    "@tiptap/core": "3.30.5",
+    "@tiptap/extension-collaboration": "3.30.5",
+    "@tiptap/extension-collaboration-caret": "3.30.5",
+    "@tiptap/extension-color": "3.30.5",
+    "@tiptap/extension-details": "3.30.5",
+    "@tiptap/extension-drag-handle": "3.30.5",
+    "@tiptap/extension-drag-handle-react": "3.30.5",
+    "@tiptap/extension-highlight": "3.30.5",
+    "@tiptap/extension-horizontal-rule": "3.30.5",
+    "@tiptap/extension-image": "3.30.5",
+    "@tiptap/extension-link": "3.30.5",
+    "@tiptap/extension-list": "3.30.5",
+    "@tiptap/extension-node-range": "3.30.5",
+    "@tiptap/extension-placeholder": "3.30.5",
+    "@tiptap/extension-strike": "3.30.5",
+    "@tiptap/extension-subscript": "3.30.5",
+    "@tiptap/extension-superscript": "3.30.5",
+    "@tiptap/extension-table": "3.30.5",
+    "@tiptap/extension-table-cell": "3.30.5",
+    "@tiptap/extension-table-header": "3.30.5",
+    "@tiptap/extension-table-row": "3.30.5",
+    "@tiptap/extension-text-align": "3.30.5",
+    "@tiptap/extension-text-style": "3.30.5",
+    "@tiptap/extension-youtube": "3.30.5",
+    "@tiptap/pm": "3.30.5",
+    "@tiptap/react": "3.30.5",
+    "@tiptap/starter-kit": "3.30.5",
     "@tuturuuu/ai": "0.8.3",
     "@tuturuuu/apis": "0.11.3",
     "@tuturuuu/hooks": "0.1.1",
@@ -108,18 +108,18 @@
     "framer-motion": "^13.1.1",
     "gsap": "^3.15.0",
     "html-entities": "^2.6.0",
-    "html2canvas-pro": "^2.3.9",
+    "html2canvas-pro": "^2.4.0",
     "input-otp": "^1.5.0",
     "katex": "^0.18.4",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
     "motion": "^13.1.1",
-    "next": "^16.3.2",
-    "next-intl": "^4.13.7",
+    "next": "^16.3.3",
+    "next-intl": "^4.14.1",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.10.0",
+    "nuqs": "^2.10.1",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-view": "1.42.2",
+    "prosemirror-view": "1.42.3",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",
     "react-colorful": "^5.8.0",
@@ -136,7 +136,7 @@
     "recharts": "3.10.1",
     "slot-text": "^0.3.4",
     "sonner": "^2.0.8",
-    "streamdown": "^2.5.0",
+    "streamdown": "^2.6.0",
     "tailwind-scrollbar": "^4.0.2",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
@@ -150,21 +150,21 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-query": "^5.102.1",
-    "@tanstack/react-table": "^9.1.2",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-table": "^9.2.3",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@tuturuuu/types": "0.28.0",
     "@tuturuuu/typescript-config": "0.1.2",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.25",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.0",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
+    "@types/react-dom": "^19.2.5",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
-    "@vitejs/plugin-react": "^6.1.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "autoprefixer": "^10.5.4",
     "jsdom": "^30.0.1",
     "postcss": "^8.5.26",

package/src/components/ui/finance/invoices/subscription-invoice.test.tsx

@@ -30,15 +30,28 @@ const testState = vi.hoisted(() => {
 
   return {
     InvoicePaymentSettings: vi.fn(),
+    SubscriptionAttendanceSummary: vi.fn(),
     categories: [] as Array<{ id: string; name: string }>,
     groupIds: ['group-1'],
     month: '2026-07',
+    setMonth: vi.fn(),
     productSelectionInjected: false,
     products: [product],
     selectedProducts: [{ inventory, product, quantity: 1 }],
     useCategories: vi.fn(),
     useWallets: vi.fn(),
     userId: 'user-1',
+    userGroups: [
+      {
+        workspace_user_groups: {
+          ending_date: null as string | null,
+          id: 'group-1',
+          name: 'Group 1',
+          sessions: ['2026-07-05'],
+          starting_date: '2026-07-01',
+        },
+      },
+    ],
     wallets: [] as Array<{
       currency: string;
       id: string;
@@ -67,7 +80,7 @@ vi.mock('nuqs', () => ({
   useQueryState: (key: string, options?: { defaultValue?: unknown }) => {
     if (key === 'user_id') return [testState.userId, vi.fn()];
     if (key === 'group_ids') return [testState.groupIds, vi.fn()];
-    if (key === 'month') return [testState.month, vi.fn()];
+    if (key === 'month') return [testState.month, testState.setMonth];
     return [options?.defaultValue ?? '', vi.fn()];
   },
 }));
@@ -113,7 +126,10 @@ vi.mock('./components/invoice-products-permission-warning', () => ({
 }));
 
 vi.mock('./components/subscription-attendance-summary', () => ({
-  SubscriptionAttendanceSummary: () => null,
+  SubscriptionAttendanceSummary: (props: unknown) => {
+    testState.SubscriptionAttendanceSummary(props);
+    return null;
+  },
 }));
 
 vi.mock('./components/subscription-group-selector', () => ({
@@ -178,17 +194,7 @@ vi.mock('./hooks', () => ({
     isLoading: false,
   }),
   useUserGroups: () => ({
-    data: [
-      {
-        workspace_user_groups: {
-          ending_date: null,
-          id: 'group-1',
-          name: 'Group 1',
-          sessions: ['2026-07-05'],
-          starting_date: '2026-07-01',
-        },
-      },
-    ],
+    data: testState.userGroups,
     isLoading: false,
   }),
   useUserLinkedPromotions: () => ({ data: [] }),
@@ -262,9 +268,14 @@ function renderSubscriptionInvoice(
 describe('SubscriptionInvoice checkout defaults', () => {
   beforeEach(() => {
     testState.InvoicePaymentSettings.mockClear();
+    testState.SubscriptionAttendanceSummary.mockClear();
     testState.useCategories.mockClear();
     testState.useWallets.mockClear();
     testState.productSelectionInjected = false;
+    testState.month = '2026-07';
+    testState.setMonth.mockClear();
+    testState.userGroups[0]!.workspace_user_groups.ending_date = null;
+    testState.userGroups[0]!.workspace_user_groups.sessions = ['2026-07-05'];
     testState.products[0]!.finance_category_id = null;
     testState.wallets = [];
     testState.categories = [];
@@ -328,4 +339,29 @@ describe('SubscriptionInvoice checkout defaults', () => {
       )
     );
   });
+
+  it('keeps an advance month selected after the group schedule end', async () => {
+    testState.month = '2026-09';
+    testState.userGroups[0]!.workspace_user_groups.ending_date = '2026-08-31';
+    testState.userGroups[0]!.workspace_user_groups.sessions = [
+      '2026-07-05',
+      '2026-08-05',
+      '2026-09-05',
+    ];
+
+    renderSubscriptionInvoice();
+
+    await waitFor(() =>
+      expect(testState.SubscriptionAttendanceSummary).toHaveBeenCalledWith(
+        expect.objectContaining({
+          availableMonths: expect.arrayContaining([
+            expect.objectContaining({ value: '2026-09' }),
+          ]),
+          selectedMonth: '2026-09',
+        })
+      )
+    );
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-07');
+    expect(testState.setMonth).not.toHaveBeenCalledWith('2026-08');
+  });
 });

package/src/components/ui/finance/invoices/subscription-invoice.tsx

@@ -728,30 +728,22 @@ export function SubscriptionInvoice({
     }
     lastMonthSyncRef.current = null;
 
-    const { earliestStart, latestEnd } = getGroupsDateRange(
-      userGroups,
-      selectedGroupIds
-    );
+    const { earliestStart } = getGroupsDateRange(userGroups, selectedGroupIds);
 
-    if (!earliestStart || !latestEnd) return;
+    if (!earliestStart) return;
 
     const currentMonth = getMonthStartDate(selectedMonth);
     if (Number.isNaN(currentMonth.getTime())) return;
 
     const earliestMonthStart = getMonthStartDate(earliestStart);
-    const latestMonthStart = getMonthStartDate(latestEnd);
 
-    if (currentMonth < earliestMonthStart || currentMonth > latestMonthStart) {
+    if (currentMonth < earliestMonthStart) {
       // Only correct once per groups-selection to avoid update loops
       if (lastValidatedKeyRef.current === monthValidationKey) return;
       lastValidatedKeyRef.current = monthValidationKey;
 
       const now = getCurrentBillingDate(workspaceTimezone);
-      let defaultMonth: Date;
-
-      if (now >= earliestStart && now <= latestEnd) defaultMonth = now;
-      else if (now > latestEnd) defaultMonth = latestEnd;
-      else defaultMonth = earliestStart;
+      const defaultMonth = now >= earliestStart ? now : earliestStart;
 
       const nextMonth = formatMonthValue(defaultMonth);
       if (nextMonth !== selectedMonth) {

package/src/components/ui/finance/invoices/utils.test.ts

@@ -233,7 +233,7 @@ describe('subscription invoice coverage', () => {
     ).toBe(true);
   });
 
-  it('generates prepaid future month options capped by group ending dates', () => {
+  it('keeps future billing months available after a group ending date', () => {
     const groups = [
       {
         workspace_user_groups: {
@@ -247,10 +247,11 @@ describe('subscription invoice coverage', () => {
     ] satisfies UserGroup[];
 
     expect(
-      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 12).map(
-        (month) => month.value
-      )
-    ).toEqual(['2026-06', '2026-07', '2026-08']);
+      getAvailableMonths(groups, [groupId], [], 'en-US', '2026-06', 3, {
+        now: new Date(2026, 5, 15),
+        workspaceTimezone: 'UTC',
+      }).map((month) => month.value)
+    ).toEqual(['2026-06', '2026-07', '2026-08', '2026-09']);
   });
 
   it('skips paid months and uses scheduled sessions for future prepaid quantities', () => {

package/src/components/ui/finance/invoices/utils.ts

@@ -524,7 +524,9 @@ export const getAvailableMonths = (
       ? getMonthStartDate(selectedMonthFallback)
       : currentMonthStart;
   const resolvedRangeEnd =
-    futureMonthHorizon > 0 && !latestEnd ? futureHorizonEnd : resolvedLatestEnd;
+    futureMonthHorizon > 0 && futureHorizonEnd > resolvedLatestEnd
+      ? futureHorizonEnd
+      : resolvedLatestEnd;
 
   const months: AvailableMonthOption[] = [];
   const currentDate = new Date(earliestStart);

package/src/components/ui/finance/transactions/columns.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import type { ColumnDef } from '@tuturuuu/ui/custom/tables/data-table';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { transactionColumns } from './columns';
 
 vi.mock('next-intl', () => ({
@@ -82,6 +83,10 @@ describe('transactionColumns', () => {
       'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;Secure';
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('masks the amount column when finance numbers are globally hidden', () => {
     render(<TransactionAmountCell amount={123} />);
 
@@ -116,4 +121,23 @@ describe('transactionColumns', () => {
     expect(screen.getByText('Cash')).toBeVisible();
     expect(screen.getByText('Food & Beverage')).toBeVisible();
   });
+
+  it('keeps server-rendered transaction dates stable as time advances', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime('2026-08-31T00:59:00.000Z');
+
+    const transaction = {
+      taken_at: '2026-08-31T00:00:00.000Z',
+    };
+    const firstRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    vi.setSystemTime('2026-08-31T02:01:00.000Z');
+    const laterRender = renderToString(
+      <TransactionColumnCell accessorKey="taken_at" original={transaction} />
+    );
+
+    expect(laterRender).toBe(firstRender);
+  });
 });

package/src/components/ui/finance/transactions/columns.tsx

@@ -12,6 +12,7 @@ import { formatCurrency } from '@tuturuuu/utils/format';
 import moment from 'moment';
 import 'moment/locale/vi';
 import { useLocale } from 'next-intl';
+import { useSyncExternalStore } from 'react';
 import { DataTableColumnHeader } from '../../custom/tables/data-table-column-header';
 import {
   FINANCE_HIDDEN_AMOUNT,
@@ -27,6 +28,44 @@ interface TransactionExtraData {
   isPersonalWorkspace?: boolean;
 }
 
+const subscribeToHydration = () => () => undefined;
+const getHydratedSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+function TransactionDateCell({
+  includeTime = false,
+  locale,
+  value,
+}: {
+  includeTime?: boolean;
+  locale: string;
+  value: unknown;
+}) {
+  const isHydrated = useSyncExternalStore(
+    subscribeToHydration,
+    getHydratedSnapshot,
+    getServerSnapshot
+  );
+
+  if (!value) return <div className="min-w-32">-</div>;
+
+  const localDate = moment(value);
+  if (!localDate.isValid()) return <div className="min-w-32">-</div>;
+
+  const format = includeTime ? 'DD/MM/YYYY, HH:mm:ss' : 'DD/MM/YYYY';
+  const absoluteDate = isHydrated
+    ? localDate.locale(locale).format(format)
+    : moment.utc(value).locale(locale).format(format);
+
+  return (
+    <div className="min-w-32">
+      {isHydrated && !includeTime
+        ? `${localDate.locale(locale).fromNow()}, ${absoluteDate}`
+        : absoluteDate}
+    </div>
+  );
+}
+
 function TransactionAmountCell({
   amount,
   currency,
@@ -265,15 +304,7 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('taken_at')
-            ? `${moment(row.getValue('taken_at')).locale(locale).fromNow()}, ${moment(
-                row.getValue('taken_at')
-              )
-                .locale(locale)
-                .format('DD/MM/YYYY')}`
-            : '-'}
-        </div>
+        <TransactionDateCell locale={locale} value={row.getValue('taken_at')} />
       ),
     },
     {
@@ -286,13 +317,11 @@ export const transactionColumns = ({
         />
       ),
       cell: ({ row }) => (
-        <div className="min-w-32">
-          {row.getValue('created_at')
-            ? moment(row.getValue('created_at'))
-                .locale(locale)
-                .format('DD/MM/YYYY, HH:mm:ss')
-            : '-'}
-        </div>
+        <TransactionDateCell
+          includeTime
+          locale={locale}
+          value={row.getValue('created_at')}
+        />
       ),
     },
     {

package/src/components/ui/text-editor/task-item-checkbox-view.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskItemCheckboxContent } from './task-item-checkbox-view';
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('./task-item-checkbox', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./task-item-checkbox')>();
+
+  return {
+    ...actual,
+    useMentionedTaskStatuses: () => ({ data: [] }),
+  };
+});
+
+function createNodeViewProps() {
+  const setNodeMarkup = vi.fn();
+  const command = vi.fn(
+    (
+      callback: (props: {
+        tr: { setNodeMarkup: typeof setNodeMarkup };
+      }) => boolean
+    ) => callback({ tr: { setNodeMarkup } })
+  );
+
+  const props = {
+    node: {
+      attrs: { checked: false },
+      descendants: vi.fn(),
+    },
+    getPos: () => 4,
+    editor: {
+      isEditable: true,
+      commands: { command },
+    },
+  } as unknown as NodeViewProps;
+
+  return { command, props, setNodeMarkup };
+}
+
+describe('TaskItemCheckboxContent', () => {
+  it('cycles pointer interactions before the editor can replace the node view', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    fireEvent.pointerDown(checkbox, { button: 0, isPrimary: true });
+
+    expect(setNodeMarkup).toHaveBeenLastCalledWith(4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('cycles all three states from the keyboard', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+
+    fireEvent.keyDown(checkbox, { key: ' ' });
+    fireEvent.keyDown(checkbox, { key: 'Enter' });
+    fireEvent.keyDown(checkbox, { key: ' ' });
+
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(1, 4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(2, 4, undefined, {
+      checked: true,
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(3, 4, undefined, {
+      checked: false,
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+});

package/src/components/ui/text-editor/task-item-checkbox-view.tsx

@@ -68,14 +68,24 @@ export function TaskItemCheckboxContent({
     });
   }, [editor, getPos, node.attrs, checkboxState]);
 
-  const handleCheckboxClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCheckboxPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (!event.isPrimary || event.button !== 0) return;
       event.preventDefault();
       event.stopPropagation();
-      if (!editor.isEditable) return;
       handleCheckboxCycle();
     },
-    [editor, handleCheckboxCycle]
+    [handleCheckboxCycle]
+  );
+
+  const handleCheckboxKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.stopPropagation();
+      handleCheckboxCycle();
+    },
+    [handleCheckboxCycle]
   );
 
   return (
@@ -84,29 +94,29 @@ export function TaskItemCheckboxContent({
         className="task-list-checkbox-label flex shrink-0 select-none pt-2.5"
         contentEditable={false}
       >
+        {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
         <button
           type="button"
-          aria-label={
-            isChecked
-              ? 'Checked'
-              : isIndeterminate
-                ? 'Indeterminate'
-                : 'Unchecked'
-          }
+          role="checkbox"
+          aria-label="Task item status"
+          aria-checked={isIndeterminate ? 'mixed' : isChecked}
           aria-disabled={!editor.isEditable}
-          onClick={handleCheckboxClick}
+          onPointerDown={handleCheckboxPointerDown}
+          onKeyDown={handleCheckboxKeyDown}
           className={cn(
-            'task-list-checkbox flex h-4.5 w-4.5 items-center justify-center',
-            'cursor-pointer rounded-lg border-2 bg-background',
-            'transition-all duration-150',
+            'task-list-checkbox flex size-5 items-center justify-center',
+            'cursor-pointer rounded-md border-2 bg-background',
+            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
+            !editor.isEditable && 'cursor-default opacity-70',
             !completedTaskColor && [
               'border-input',
               'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
-              'focus:border-dynamic-gray focus:outline-none focus:ring-2 focus:ring-dynamic-gray/30 focus:ring-offset-2',
+              'focus-visible:border-dynamic-gray',
               isChecked &&
-                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus:border-dynamic-green focus:ring-dynamic-green/30',
+                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
               isIndeterminate &&
-                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus:border-dynamic-orange focus:ring-dynamic-orange/30',
+                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
             ],
             completedTaskColor === 'red' && [
               'border-dynamic-red/50',