wip

Author: jho406

demo/frames/heroui.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@heroui/styles";

demo/frames/heroui.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HeroUI</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./heroui.tsx"></script>
+</body>
+</html>

demo/frames/heroui.tsx

@@ -0,0 +1,48 @@
+import './heroui.css'
+import {
+  TextField,
+  EmailField,
+  PasswordField,
+  NumberField,
+  DateField,
+  DateTimeLocalField,
+  TimeField,
+  MonthField,
+  ColorField,
+  SearchField,
+  TelField,
+  UrlField,
+  RangeField,
+  Checkbox,
+  CollectionCheckboxes,
+  CollectionRadioButtons,
+  Select,
+  TextArea,
+  FileField,
+  SubmitButton,
+} from '../../wrappers/ts/heroui/v3/index'
+import { renderFrame } from './renderFrame'
+
+renderFrame({
+  TextField,
+  EmailField,
+  PasswordField,
+  NumberField,
+  DateField,
+  DateTimeLocalField,
+  TimeField,
+  MonthField,
+  ColorField,
+  SearchField,
+  TelField,
+  UrlField,
+  RangeField,
+  Checkbox,
+  CollectionCheckboxes,
+  CollectionRadioButtons,
+  Select,
+  MultiSelect: Select,
+  TextArea,
+  FileField,
+  SubmitButton,
+})

demo/index.html

@@ -146,6 +146,7 @@ <h2 id="current-field">TextField</h2>
       { id: 'chakra', label: 'Chakra UI' },
       { id: 'react-spectrum', label: 'React Spectrum' },
       { id: 'mantine', label: 'Mantine' },
+      { id: 'heroui', label: 'HeroUI' },
       { id: 'mui', label: 'MUI' },
       { id: 'react-aria', label: 'React Aria' },
     ]

demo/vite.config.ts

@@ -4,6 +4,11 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],
+  css: {
+    postcss: {
+      plugins: [require('@tailwindcss/postcss')],
+    },
+  },
   root: __dirname,
   base: './',
   build: {
@@ -16,6 +21,7 @@ export default defineConfig({
         shadcn: path.resolve(__dirname, 'frames/shadcn.html'),
         chakra: path.resolve(__dirname, 'frames/chakra.html'),
         mantine: path.resolve(__dirname, 'frames/mantine.html'),
+        heroui: path.resolve(__dirname, 'frames/heroui.html'),
         mui: path.resolve(__dirname, 'frames/mui.html'),
         'react-aria': path.resolve(__dirname, 'frames/react-aria.html'),
         'react-spectrum': path.resolve(__dirname, 'frames/react-spectrum.html'),

package.json

@@ -9,6 +9,7 @@
     "wrappers/ts/react-aria/v1",
     "wrappers/ts/react-spectrum/v3",
     "wrappers/ts/react-spectrum/s2",
+    "wrappers/ts/heroui/v3",
     "wrappers/ts/mui/v9",
     "wrappers/ts/chakra/v3"
   ],
@@ -55,6 +56,8 @@
   "homepage": "https://github.com/thoughtbot/candy_wrapper#readme",
   "devDependencies": {
     "@react-aria/test-utils": "^1.0.0-alpha.7",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.1.0",
@@ -73,6 +76,7 @@
     "prettier-eslint": "^16.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.1.0",
     "typedoc": "^0.28.0",
     "typedoc-plugin-markdown": "^4.12.0",