@itmaxglobal/design-system-react
v0.1.0
Published
React component bindings for the ITMAX Design System.
Downloads
15
Maintainers
itmaxglobalReadme
@itmaxglobal/design-system-react
React component bindings for the ITMAX Design System. These are thin, typed wrappers over the design system's CSS classes — the CSS package remains the single source of truth for styling and theming.
Install
npm install @itmaxglobal/design-system-react @itmaxglobal/design-systemreact and react-dom (>=17) are peer dependencies.
Setup
Import the design system CSS once at your app root (the React package emits the matching class names but ships no CSS of its own):
import "@itmaxglobal/design-system/css";
// optional icon fonts:
// import "@itmaxglobal/design-system/icons";Dark mode works the same as the CSS package — set data-theme="dark" on a
container or <html>.
Usage
import { useState } from "react";
import { Button, TextField, Checkbox, Tabs, Modal } from "@itmaxglobal/design-system-react";
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<TextField label="Email" type="email" message="We never share it." />
<Checkbox color="primary" defaultChecked>Accept terms</Checkbox>
<Tabs
variant="solid"
items={[
{ value: "a", label: "Overview", content: <p>Overview</p> },
{ value: "b", label: "Activity", badge: 3, content: <p>Activity</p> }
]}
/>
<Button variant="primary" onClick={() => setOpen(true)}>Open modal</Button>
<Modal
open={open}
onClose={() => setOpen(false)}
title="Saved"
subtitle="Your changes have been saved."
actions={<Button onClick={() => setOpen(false)}>Done</Button>}
/>
</>
);
}Components in this release (Phase 1)
Presentational: Button, Badge, Chip, Alert, Tooltip, TextField,
Checkbox, Radio, Switch, Select.
Interactive: Tabs, Modal.
Also exported: useControllableState, useFocusTrap, cn.
Develop
npm run typecheck # tsc --noEmit
npm run build # tsup -> dist (ESM + CJS + .d.ts)