@bazir/clean-ui

An @bazir/element remake of @rbxts/react-clean-ui.

The package keeps the original library's theme concepts and familiar component names, but uses Element observables and on:* event props instead of React bindings, hooks, and Event tables.

import { element, mount } from "@bazir/element";
import { AppProvider, Button, Card, Text, VStack } from "@bazir/clean-ui";

mount(
  () => (
    <AppProvider>
      <Card width="420px">
        <Card.Header><Text variant="heading" text="Settings" /></Card.Header>
        <Card.Body>
          <VStack spacing="md">
            <Text text="A clean UI powered by Element." />
            <Button text="Save" intent="primary" />
          </VStack>
        </Card.Body>
      </Card>
    </AppProvider>
  ),
  target,
);

The Element port includes the complete public surface of React Clean UI:

• default, dark, and sandstone themes plus deep theme creation/extension;
• the full icon name catalog and default icon asset set;
• decorators, surfaces, typography, stacks, grids, scrollers, groups, tabs, fieldsets, menus, drag-and-drop, and overlay/registry providers;
• button, hover button, checkbox, validated input, select, single/range slider;
• toast controllers, tooltips, bar charts, and interactive pie charts;
• all original contexts, helpers, provider names, and compound component members.

React Binding values are represented by PropertyValue<T> observables. React Event tables remain accepted by compatibility-facing components; intrinsic Element nodes use on:* for events and change:* for property changes.

Animations use @bazir/motion: buttons interpolate hover colors, tooltips and toasts fade in, and spinning icons use looping keyframes. This keeps animation values observable and lets Element bind them directly without component-level render loops.