From e3a5a31d10e75c376ab7d1cc2466b0727b0b7b71 Mon Sep 17 00:00:00 2001
From: Dilshod Turobov <deebov@yandex.com>
Date: Sun, 27 Sep 2026 03:23:20 +0200
Subject: [PATCH] Make component source compile under strict consumer tsconfigs

Fixes the errors our source produces in shadcn/ui projects that compile with
noUncheckedIndexedAccess, declaration emit and an ES2022 lib (the shadcn
monorepo template), without changing rendered output:

- narrow possibly-undefined array reads (empty-state, input-tags, input-payment,
  avatar utils, dropdown-button-link, table demo)
- export the per-file IllustrationProps so the Illustration map can be named
  in emitted declarations (TS4023)
- replace ES2023+/ES2025 APIs with equivalents available in ES2022
  (toReversed in charts-base, Iterator.prototype.toArray in dropdown-button-link)

tsconfig now enables noUncheckedIndexedAccess, verbatimModuleSyntax,
erasableSyntaxOnly and declaration, and uses the es2022 lib, so these can't
regress.
---
 components/application/charts/charts-base.tsx    |  2 +-
 .../application/empty-state/empty-state.tsx      |  4 +++-
 components/application/table/table.demo.tsx      |  8 ++++----
 components/base/avatar/utils.ts                  |  2 +-
 .../base/dropdown/dropdown-button-link.tsx       |  4 ++--
 components/base/input/input-payment.tsx          | 16 +++++++++-------
 components/base/input/input-tags.tsx             |  4 ++--
 components/shared-assets/illustrations/box.tsx   |  2 +-
 components/shared-assets/illustrations/cloud.tsx |  2 +-
 .../shared-assets/illustrations/credit-card.tsx  |  2 +-
 .../shared-assets/illustrations/documents.tsx    |  2 +-
 tsconfig.json                                    |  6 +++++-
 12 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/components/application/charts/charts-base.tsx b/components/application/charts/charts-base.tsx
index 809af77..3356668 100644
--- a/components/application/charts/charts-base.tsx
+++ b/components/application/charts/charts-base.tsx
@@ -46,7 +46,7 @@ export const selectEvenlySpacedItems = <T extends readonly unknown[]>(dataArray:
  * @returns The legend content.
  */
 export const ChartLegendContent = ({ reversed, payload, align, layout, className }: LegendContentProps & { reversed?: boolean; className?: string }) => {
-    payload = reversed ? payload?.toReversed() : payload;
+    payload = reversed && payload ? [...payload].reverse() : payload;
 
     return (
         <ul
diff --git a/components/application/empty-state/empty-state.tsx b/components/application/empty-state/empty-state.tsx
index 9cf4ed4..b4e1813 100644
--- a/components/application/empty-state/empty-state.tsx
+++ b/components/application/empty-state/empty-state.tsx
@@ -167,6 +167,8 @@ const AvatarRadius = ({ avatars = [], ...props }: AvatarRadiusProps) => {
 
             {avatars.slice(0, avatarSlots.length).map((avatar, i) => {
                 const slot = avatarSlots[i];
+                if (!slot) return null;
+
                 const rad = (slot.angle * Math.PI) / 180;
                 const x = Math.sin(rad) * slot.ring;
                 const y = -Math.cos(rad) * slot.ring;
@@ -205,7 +207,7 @@ const AvatarRow = ({ avatars = [], children, ...props }: AvatarRowProps) => {
     const leftAvatars = avatars.slice(0, count);
     const rightAvatars = avatars.slice(count, count * 2);
 
-    const renderAvatar = (avatar: { src: string; alt?: string }, sizeClass: string, key: number) => (
+    const renderAvatar = (avatar: { src: string; alt?: string }, sizeClass: string | undefined, key: number) => (
         <div
             key={key}
             className={cx(
diff --git a/components/application/table/table.demo.tsx b/components/application/table/table.demo.tsx
index 713dada..0cf4b2b 100644
--- a/components/application/table/table.demo.tsx
+++ b/components/application/table/table.demo.tsx
@@ -810,8 +810,8 @@ export const Table04DividerLine = () => {
                         <Table.Row id={item.name}>
                             <Table.Cell>
                                 <div className="flex items-center gap-3">
-                                    <FileIcon type={item.name.split(".")[1]} theme="light" className="size-10 dark:hidden" />
-                                    <FileIcon type={item.name.split(".")[1]} theme="dark" className="size-10 not-dark:hidden" />
+                                    <FileIcon type={item.name.split(".")[1] ?? ""} theme="light" className="size-10 dark:hidden" />
+                                    <FileIcon type={item.name.split(".")[1] ?? ""} theme="dark" className="size-10 not-dark:hidden" />
 
                                     <div className="whitespace-nowrap">
                                         <p className="text-sm font-medium text-primary">{item.name}</p>
@@ -866,8 +866,8 @@ export const Table04AlternatingFills = () => {
                         <Table.Row id={item.name} className="odd:bg-secondary">
                             <Table.Cell>
                                 <div className="flex items-center gap-3">
-                                    <FileIcon type={item.name.split(".")[1]} theme="light" className="size-10 dark:hidden" />
-                                    <FileIcon type={item.name.split(".")[1]} theme="dark" className="size-10 not-dark:hidden" />
+                                    <FileIcon type={item.name.split(".")[1] ?? ""} theme="light" className="size-10 dark:hidden" />
+                                    <FileIcon type={item.name.split(".")[1] ?? ""} theme="dark" className="size-10 not-dark:hidden" />
 
                                     <div className="whitespace-nowrap">
                                         <p className="text-sm font-medium text-primary">{item.name}</p>
diff --git a/components/base/avatar/utils.ts b/components/base/avatar/utils.ts
index a8feb18..9bc9df0 100644
--- a/components/base/avatar/utils.ts
+++ b/components/base/avatar/utils.ts
@@ -7,6 +7,6 @@
  *          it returns the first character of each word.
  */
 export const getInitials = (name: string) => {
-    const [firstName, lastName] = name.split(" ");
+    const [firstName = "", lastName] = name.split(" ");
     return firstName.charAt(0) + (lastName ? lastName.charAt(0) : "");
 };
diff --git a/components/base/dropdown/dropdown-button-link.tsx b/components/base/dropdown/dropdown-button-link.tsx
index c2ddf9d..399edf5 100644
--- a/components/base/dropdown/dropdown-button-link.tsx
+++ b/components/base/dropdown/dropdown-button-link.tsx
@@ -13,7 +13,7 @@ const permissions = [
 ];
 
 export const DropdownButtonLink = () => {
-    const [selectedPermission, setSelectedPermission] = useState<string>(permissions[1].id);
+    const [selectedPermission, setSelectedPermission] = useState<string>("can-edit");
 
     return (
         <Dropdown.Root>
@@ -34,7 +34,7 @@ export const DropdownButtonLink = () => {
                     <Dropdown.Section
                         selectionMode="single"
                         selectedKeys={[selectedPermission]}
-                        onSelectionChange={(keys) => setSelectedPermission(typeof keys === "string" ? keys : (keys.keys().toArray()[0] as string))}
+                        onSelectionChange={(keys) => setSelectedPermission(typeof keys === "string" ? keys : (Array.from(keys)[0] as string))}
                     >
                         {permissions.map((permission) => (
                             <Dropdown.Item key={permission.id} id={permission.id}>
diff --git a/components/base/input/input-payment.tsx b/components/base/input/input-payment.tsx
index 018be5a..61ae563 100644
--- a/components/base/input/input-payment.tsx
+++ b/components/base/input/input-payment.tsx
@@ -8,6 +8,13 @@ import { Label } from "@/components/base/input/label";
 import { AmexIcon, DiscoverIcon, MastercardIcon, UnionPayIcon, VisaIcon } from "@/components/foundations/payment-icons";
 import { cx } from "@/utils/cx";
 
+const unknownCardType = {
+    name: "Unknown",
+    pattern: /.*/, // Fallback pattern for unknown cards
+    card: "unknown",
+    icon: MastercardIcon,
+};
+
 const cardTypes = [
     {
         name: "Visa",
@@ -39,12 +46,7 @@ const cardTypes = [
         card: "unionpay",
         icon: UnionPayIcon,
     },
-    {
-        name: "Unknown",
-        pattern: /.*/, // Fallback pattern for unknown cards
-        card: "unknown",
-        icon: MastercardIcon,
-    },
+    unknownCardType,
 ];
 
 /**
@@ -59,7 +61,7 @@ const detectCardType = (number: string) => {
     // Find the matching card type
     const card = cardTypes.find((cardType) => cardType.pattern.test(sanitizedNumber));
 
-    return card || cardTypes[cardTypes.length - 1];
+    return card || unknownCardType;
 };
 
 /**
diff --git a/components/base/input/input-tags.tsx b/components/base/input/input-tags.tsx
index d540130..e9e423c 100644
--- a/components/base/input/input-tags.tsx
+++ b/components/base/input/input-tags.tsx
@@ -149,7 +149,7 @@ export const InputTags = ({
     const focusLastTag = useCallback(() => {
         const tagEls = tagGroupRef.current?.querySelectorAll<HTMLElement>('[role="row"]');
         if (tagEls && tagEls.length > 0) {
-            tagEls[tagEls.length - 1].focus();
+            tagEls[tagEls.length - 1]?.focus();
         }
     }, []);
 
@@ -182,7 +182,7 @@ export const InputTags = ({
             const tagEls = tagGroupRef.current?.querySelectorAll<HTMLElement>('[role="row"]');
             if (tagEls && tagEls.length > 0) {
                 const lastTag = tagEls[tagEls.length - 1];
-                if (document.activeElement === lastTag || lastTag.contains(document.activeElement)) {
+                if (lastTag && (document.activeElement === lastTag || lastTag.contains(document.activeElement))) {
                     inputRef.current?.focus();
                 }
             }
diff --git a/components/shared-assets/illustrations/box.tsx b/components/shared-assets/illustrations/box.tsx
index 32e9386..62a51f7 100644
--- a/components/shared-assets/illustrations/box.tsx
+++ b/components/shared-assets/illustrations/box.tsx
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "react";
 import { UploadCloud02 } from "@untitledui/icons";
 import { cx } from "@/utils/cx";
 
-interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg";
     svgClassName?: string;
     childrenClassName?: string;
diff --git a/components/shared-assets/illustrations/cloud.tsx b/components/shared-assets/illustrations/cloud.tsx
index df93fc2..f1b3eff 100644
--- a/components/shared-assets/illustrations/cloud.tsx
+++ b/components/shared-assets/illustrations/cloud.tsx
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "react";
 import { SearchLg } from "@untitledui/icons";
 import { cx } from "@/utils/cx";
 
-interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg";
     svgClassName?: string;
     childrenClassName?: string;
diff --git a/components/shared-assets/illustrations/credit-card.tsx b/components/shared-assets/illustrations/credit-card.tsx
index 19359c9..9fb1565 100644
--- a/components/shared-assets/illustrations/credit-card.tsx
+++ b/components/shared-assets/illustrations/credit-card.tsx
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "react";
 import { AlertCircle } from "@untitledui/icons";
 import { cx } from "@/utils/cx";
 
-interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg";
     svgClassName?: string;
     childrenClassName?: string;
diff --git a/components/shared-assets/illustrations/documents.tsx b/components/shared-assets/illustrations/documents.tsx
index 4ee7a83..892b609 100644
--- a/components/shared-assets/illustrations/documents.tsx
+++ b/components/shared-assets/illustrations/documents.tsx
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from "react";
 import { UploadCloud02 } from "@untitledui/icons";
 import { cx } from "@/utils/cx";
 
-interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
+export interface IllustrationProps extends HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg";
     svgClassName?: string;
     childrenClassName?: string;
diff --git a/tsconfig.json b/tsconfig.json
index eee4d71..db00925 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,14 @@
 {
     "compilerOptions": {
         "target": "ES2017",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "lib": ["dom", "dom.iterable", "es2022"],
         "allowJs": true,
         "skipLibCheck": true,
         "strict": true,
+        "noUncheckedIndexedAccess": true,
+        "verbatimModuleSyntax": true,
+        "erasableSyntaxOnly": true,
+        "declaration": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noFallthroughCasesInSwitch": true,