34 lines
2.0 KiB
Markdown
34 lines
2.0 KiB
Markdown
# @hm-design/ui
|
|
|
|
React 19 UI components and the HM default theme. Published entrypoints contain ESM JavaScript and TypeScript declarations.
|
|
|
|
```tsx
|
|
import { Button, Input } from "@hm-design/ui"
|
|
import { applyRuntimeTheme, resetRuntimeTheme } from "@hm-design/ui/theme"
|
|
```
|
|
|
|
With Tailwind CSS 4, import these styles in order in the application's CSS entrypoint:
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "@hm-design/ui/tailwind.css";
|
|
@import "@hm-design/ui/theme.css";
|
|
```
|
|
|
|
Process this entrypoint with the application's Tailwind CSS 4 integration. The package registers its compiled component classes as Tailwind sources and includes the required shadcn CSS without installing the shadcn CLI. React and React DOM are peer dependencies and are not bundled.
|
|
|
|
The default theme, Noto Sans KR font and its OFL license are included. External theme JSON and a Theme CDN are optional and are not included in this package. The runtime theme API remains available from `@hm-design/ui/theme`.
|
|
|
|
For Dashboard work status colors, explicitly load the optional status stylesheet after the theme:
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "@hm-design/ui/tailwind.css";
|
|
@import "@hm-design/ui/theme.css";
|
|
@import "@hm-design/ui/dashboard-status.css";
|
|
```
|
|
|
|
The status stylesheet defines only `--hm-dashboard-status-active`, `--hm-dashboard-status-hold`, `--hm-dashboard-status-done` and `--hm-dashboard-status-issue`. It does not automatically style `Badge`, buttons or `data-status` attributes. Consumers must map these variables to their existing component styles; the repository's `docs/patterns/dashboard-layout.md` shows the Badge mapping. `done` resolves the existing white palette token in each `:root` / `[data-hm-theme]` scope. The other colors preserve the approved Dashboard values and are not additional Runtime Theme tokens.
|
|
|
|
From the HMDesignSystem repository, run `npm run build -w @hm-design/ui`. `npm pack` runs this build automatically. Only `dist/`, this README and the package manifest are packed; source and Storybook files are excluded.
|