From b38e20b2ea6dbb191a892bc561646ef908deadc9 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Thu, 9 Jul 2026 12:53:36 +0500
Subject: [PATCH] ui: rewrap @theme-ui's remaining component (#10073)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 packages/ui/src/components/checkbox.tsx | 47 +++++++++++++++++++++++
 packages/ui/src/components/grid.tsx     | 46 ++++++++++++++++++++++
 packages/ui/src/components/image.tsx    | 46 ++++++++++++++++++++++
 packages/ui/src/components/index.ts     | 11 ++++++
 packages/ui/src/components/input.tsx    | 51 +++++++++++++++++++++++++
 packages/ui/src/components/label.tsx    | 47 +++++++++++++++++++++++
 packages/ui/src/components/link.tsx     | 46 ++++++++++++++++++++++
 packages/ui/src/components/progress.tsx | 46 ++++++++++++++++++++++
 packages/ui/src/components/radio.tsx    | 47 +++++++++++++++++++++++
 packages/ui/src/components/switch.tsx   | 47 +++++++++++++++++++++++
 packages/ui/src/components/text.tsx     | 47 +++++++++++++++++++++++
 packages/ui/src/components/textarea.tsx | 47 +++++++++++++++++++++++
 12 files changed, 528 insertions(+)
 create mode 100644 packages/ui/src/components/checkbox.tsx
 create mode 100644 packages/ui/src/components/grid.tsx
 create mode 100644 packages/ui/src/components/image.tsx
 create mode 100644 packages/ui/src/components/input.tsx
 create mode 100644 packages/ui/src/components/label.tsx
 create mode 100644 packages/ui/src/components/link.tsx
 create mode 100644 packages/ui/src/components/progress.tsx
 create mode 100644 packages/ui/src/components/radio.tsx
 create mode 100644 packages/ui/src/components/switch.tsx
 create mode 100644 packages/ui/src/components/text.tsx
 create mode 100644 packages/ui/src/components/textarea.tsx

diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
new file mode 100644
index 000000000..94d335a20
--- /dev/null
+++ b/packages/ui/src/components/checkbox.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Checkbox as ThemeUICheckbox,
+  CheckboxProps as ThemeUICheckboxProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface CheckboxProps
+  extends Omit<
+      ThemeUICheckboxProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    return <ThemeUICheckbox ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/grid.tsx b/packages/ui/src/components/grid.tsx
new file mode 100644
index 000000000..3718efd54
--- /dev/null
+++ b/packages/ui/src/components/grid.tsx
@@ -0,0 +1,46 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Grid as ThemeUIGrid,
+  GridProps as ThemeUIGridProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface GridProps
+  extends Omit<
+      ThemeUIGridProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  (props, ref) => {
+    return <ThemeUIGrid ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/image.tsx b/packages/ui/src/components/image.tsx
new file mode 100644
index 000000000..33cc5d5fe
--- /dev/null
+++ b/packages/ui/src/components/image.tsx
@@ -0,0 +1,46 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Image as ThemeUIImage,
+  ImageProps as ThemeUIImageProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface ImageProps
+  extends Omit<
+      ThemeUIImageProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  (props, ref) => {
+    return <ThemeUIImage ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 98eaa3828..5a4dac152 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,3 +25,14 @@ export * from "./button.js";
 export * from "./box.js";
 export * from "./flex.js";
 export * from "./slider.js";
+export * from "./text.js";
+export * from "./label.js";
+export * from "./textarea.js";
+export * from "./input.js";
+export * from "./image.js";
+export * from "./switch.js";
+export * from "./checkbox.js";
+export * from "./link.js";
+export * from "./grid.js";
+export * from "./progress.js";
+export * from "./radio.js";
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
new file mode 100644
index 000000000..f84015593
--- /dev/null
+++ b/packages/ui/src/components/input.tsx
@@ -0,0 +1,51 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Input as ThemeUIInput,
+  InputProps as ThemeUIInputProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface InputProps
+  extends Omit<
+      ThemeUIInputProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    return <ThemeUIInput ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
new file mode 100644
index 000000000..334246744
--- /dev/null
+++ b/packages/ui/src/components/label.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Label as ThemeUILabel,
+  LabelProps as ThemeUILabelProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface LabelProps
+  extends Omit<
+      ThemeUILabelProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  (props, ref) => {
+    return <ThemeUILabel ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/link.tsx b/packages/ui/src/components/link.tsx
new file mode 100644
index 000000000..b937abfd3
--- /dev/null
+++ b/packages/ui/src/components/link.tsx
@@ -0,0 +1,46 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Link as ThemeUILink,
+  LinkProps as ThemeUILinkProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface LinkProps
+  extends Omit<
+      ThemeUILinkProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    return <ThemeUILink ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/progress.tsx b/packages/ui/src/components/progress.tsx
new file mode 100644
index 000000000..7672d088b
--- /dev/null
+++ b/packages/ui/src/components/progress.tsx
@@ -0,0 +1,46 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Progress as ThemeUIProgress,
+  ProgressProps as ThemeUIProgressProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface ProgressProps
+  extends Omit<
+      ThemeUIProgressProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Progress = React.forwardRef<HTMLProgressElement, ProgressProps>(
+  (props, ref) => {
+    return <ThemeUIProgress ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/radio.tsx b/packages/ui/src/components/radio.tsx
new file mode 100644
index 000000000..ba1656b01
--- /dev/null
+++ b/packages/ui/src/components/radio.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Radio as ThemeUIRadio,
+  RadioProps as ThemeUIRadioProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface RadioProps
+  extends Omit<
+      ThemeUIRadioProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (props, ref) => {
+    return <ThemeUIRadio ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
new file mode 100644
index 000000000..ea7334ed4
--- /dev/null
+++ b/packages/ui/src/components/switch.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Switch as ThemeUISwitch,
+  SwitchProps as ThemeUISwitchProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface SwitchProps
+  extends Omit<
+      ThemeUISwitchProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (props, ref) => {
+    return <ThemeUISwitch ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/text.tsx b/packages/ui/src/components/text.tsx
new file mode 100644
index 000000000..2df1c7090
--- /dev/null
+++ b/packages/ui/src/components/text.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Text as ThemeUIText,
+  TextProps as ThemeUITextProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface TextProps
+  extends Omit<
+      ThemeUITextProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["text"];
+  sx?: RestrictedSxProp;
+}
+
+export const Text = React.forwardRef<HTMLDivElement, TextProps>(
+  (props, ref) => {
+    return <ThemeUIText ref={ref} {...(props as any)} />;
+  }
+);
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
new file mode 100644
index 000000000..c03373541
--- /dev/null
+++ b/packages/ui/src/components/textarea.tsx
@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Textarea as ThemeUITextarea,
+  TextareaProps as ThemeUITextareaProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface TextareaProps
+  extends Omit<
+      ThemeUITextareaProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    return <ThemeUITextarea ref={ref} {...(props as any)} />;
+  }
+);