tben
844c6bad11
Input: - honour `invalidMessage` instead of always reporting "Value mismatch" - don't let the mount value wipe an external `validity` prop, and don't force `isValid: true` on clear when `validity` is supplied - sync controlled and programmatic values into `textarea` (the value effect had an empty branch that skipped textareas entirely) - accept `defaultValue`/`value` of `0` and `""` (nil check, not truthiness) - clear debounce/validation/change-handler timers on unmount - type `wrapperProps` as `ComponentProps<"div">` - let `labelProps.htmlFor` override the name link deterministically - drop duplicated focus outline classes and the stale buttonDown guard that discarded edits made right after holding a stepper NumberInputButtons: - write through `setValue` so steppers work on controlled inputs and fire `onChange` - clamp to both `min` and `max`, including `0` values, and respect `step` - round float drift, ignore steps while a trailing decimal point is typed - instance-scoped press timers with unmount cleanup; a held press no longer double-steps on the trailing click Also adds a numberText stepper example to the dev playground.
@moduletrace/twui
A modular skeletal React component framework for Tailwind CSS v4.
Install
The package is published to the Moduletrace Gitea registry. Add this to your project's .npmrc:
@moduletrace:registry=https://git.tben.me/api/packages/moduletrace/npm/
Then install the package with its required peers:
bun add @moduletrace/twui react react-dom lucide-react tailwindcss
Optional peers
Only install these if you use the matching components:
| Feature | Packages |
|---|---|
editors/AceEditor |
ace-builds |
elements/RemoteCodeBlock, mdx/markdown/* |
next-mdx-remote, remark-gfm, rehype-prism-plus |
mdx/mdx-components, next-js/hooks/useMDXComponents |
@types/mdx (dev) |
elements/ai/* |
openai (types), react-markdown |
editors/TinyMCE loads TinyMCE from a URL at runtime. Set it with the base_url prop, or with the NEXT_PUBLIC_TINYMCE_BASE_URL / BUNEXT_PUBLIC_TINYMCE_BASE_URL public env vars.
CSS
Import base.css once in your main stylesheet. It includes @import "tailwindcss", the default theme tokens, and an @source rule so Tailwind generates the classes the components use. Override tokens in your own @theme inline block:
@import "@moduletrace/twui/base.css";
@theme inline {
--color-primary: #e2b433;
--color-primary-hover: #9e7503;
--color-primary-dark: #e2b433;
--color-primary-dark-hover: #f7cc59;
/* ...see base.css for the full list of tokens */
}
.twui-button-general {
@apply rounded-full;
}
Usage
Import from the root entry:
import { Button, Stack, Row, useStatus } from "@moduletrace/twui";
Or use deep imports, which mirror the source folder layout:
import Button from "@moduletrace/twui/layout/Button";
import Input from "@moduletrace/twui/form/Input";
import TinyMCEEditor from "@moduletrace/twui/editors/TinyMCE";
Editors, MDX, Next.js helpers, the AI blocks and RemoteCodeBlock are deep-import only, so the root entry never pulls in optional peers.
Component modules are marked "use client", so they work in the Next.js App Router.
Development
bun install
bun run typecheck
bun test src
bun run compile # tsc → dist/, then scripts/post-compile.ts
Playground
dev/ is a local bunext app that imports the library straight from src/ (through the committed dev/twui symlink and a tsconfig path alias), so component edits hot-reload without running tsc. It has its own node_modules and is excluded from the published package by the files whitelist.
cd dev
bun install
cd ..
bun run dev # http://localhost:7010
Install the library dependencies at the repo root first: the symlinked sources resolve react, tailwind-merge, lucide-react and the optional peers from the root node_modules.
Other useful scripts:
bun run dev:types # tsc --watch, for consumers working against dist/
bun run dev:typecheck # typecheck the playground pages and the sources they import
Publishing
export GITBEN_NPM_TOKEN=...
./publish.sh "Commit message"
publish.sh typechecks, tests, compiles, commits, pushes, and runs bun publish. Bump version in package.json first.