@hilum/ui 3.2.13 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -11
- package/dist/index.js +33 -1
- package/dist/index.js.map +1 -1
- package/llms.txt +128 -1491
- package/package.json +1 -1
- package/src/components/chart.tsx +40 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @hilum/ui
|
|
2
2
|
|
|
3
|
-
UI primitives for the Hilum design system — Button, Input, Dialog, Combobox, and
|
|
3
|
+
UI primitives for the Hilum design system — Button, Input, Dialog, Combobox, and 85 components total, plus brand tokens, fonts, and a curated icon set.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -23,11 +23,11 @@ That's the whole setup — palette, typography, fonts, light/dark theming, and T
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
|
-
import { Button, Dialog, Input } from "@hilum/ui"
|
|
27
|
-
import { ChevronDown, Plus } from "@hilum/ui/icons"
|
|
28
|
-
import { tokens } from "@hilum/ui/tokens"
|
|
26
|
+
import { Button, Dialog, Input } from "@hilum/ui";
|
|
27
|
+
import { ChevronDown, Plus } from "@hilum/ui/icons";
|
|
28
|
+
import { tokens } from "@hilum/ui/tokens";
|
|
29
29
|
|
|
30
|
-
<Button>Click me</Button
|
|
30
|
+
<Button>Click me</Button>;
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
See the live catalog at [ui.hilum.dev](https://ui.hilum.dev) for component docs, props, and examples.
|
|
@@ -41,11 +41,11 @@ Hilum UI ships a fully-fixed brand: vivid purple `#C100F1` primary, pale lemon `
|
|
|
41
41
|
Import JS tokens for runtime access:
|
|
42
42
|
|
|
43
43
|
```ts
|
|
44
|
-
import { tokens } from "@hilum/ui/tokens"
|
|
44
|
+
import { tokens } from "@hilum/ui/tokens";
|
|
45
45
|
|
|
46
|
-
tokens.brand.primary
|
|
47
|
-
tokens.brand.secondary
|
|
48
|
-
tokens.ground[500]
|
|
46
|
+
tokens.brand.primary; // "#C100F1"
|
|
47
|
+
tokens.brand.secondary; // "#FFF5BF"
|
|
48
|
+
tokens.ground[500]; // "#737373"
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
## Theming
|
|
@@ -53,8 +53,12 @@ tokens.ground[500] // "#737373"
|
|
|
53
53
|
Light/dark mode works automatically via `prefers-color-scheme`. Override explicitly:
|
|
54
54
|
|
|
55
55
|
```html
|
|
56
|
-
<html data-theme="dark">
|
|
57
|
-
|
|
56
|
+
<html data-theme="dark">
|
|
57
|
+
<!-- force dark -->
|
|
58
|
+
<html data-theme="light">
|
|
59
|
+
<!-- force light -->
|
|
60
|
+
</html>
|
|
61
|
+
</html>
|
|
58
62
|
```
|
|
59
63
|
|
|
60
64
|
## Light / dark
|
package/dist/index.js
CHANGED
|
@@ -1346,10 +1346,35 @@ function ChartContainer({
|
|
|
1346
1346
|
}) {
|
|
1347
1347
|
const uniqueId = React19.useId();
|
|
1348
1348
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
|
1349
|
+
const containerRef = React19.useRef(null);
|
|
1350
|
+
const [canRenderChart, setCanRenderChart] = React19.useState(false);
|
|
1351
|
+
const initialDimension = React19.useMemo(
|
|
1352
|
+
() => ({ width: 800, height: typeof height === "number" ? height : 450 }),
|
|
1353
|
+
[height]
|
|
1354
|
+
);
|
|
1349
1355
|
const resolvedStyle = height === void 0 ? style : { ...style, height };
|
|
1356
|
+
React19.useEffect(() => {
|
|
1357
|
+
const element = containerRef.current;
|
|
1358
|
+
if (!element) {
|
|
1359
|
+
return;
|
|
1360
|
+
}
|
|
1361
|
+
const updateCanRenderChart = () => {
|
|
1362
|
+
const rect = element.getBoundingClientRect();
|
|
1363
|
+
setCanRenderChart(rect.width > 0 && rect.height > 0);
|
|
1364
|
+
};
|
|
1365
|
+
updateCanRenderChart();
|
|
1366
|
+
if (typeof ResizeObserver === "undefined") {
|
|
1367
|
+
setCanRenderChart(true);
|
|
1368
|
+
return;
|
|
1369
|
+
}
|
|
1370
|
+
const observer = new ResizeObserver(updateCanRenderChart);
|
|
1371
|
+
observer.observe(element);
|
|
1372
|
+
return () => observer.disconnect();
|
|
1373
|
+
}, []);
|
|
1350
1374
|
return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
|
|
1351
1375
|
"div",
|
|
1352
1376
|
{
|
|
1377
|
+
ref: containerRef,
|
|
1353
1378
|
"data-slot": "chart",
|
|
1354
1379
|
"data-chart": chartId,
|
|
1355
1380
|
className: cn(
|
|
@@ -1372,7 +1397,14 @@ function ChartContainer({
|
|
|
1372
1397
|
...props,
|
|
1373
1398
|
children: [
|
|
1374
1399
|
/* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
|
|
1375
|
-
/* @__PURE__ */ jsx(
|
|
1400
|
+
canRenderChart ? /* @__PURE__ */ jsx(
|
|
1401
|
+
RechartsPrimitive.ResponsiveContainer,
|
|
1402
|
+
{
|
|
1403
|
+
initialDimension,
|
|
1404
|
+
minWidth: 0,
|
|
1405
|
+
children
|
|
1406
|
+
}
|
|
1407
|
+
) : null
|
|
1376
1408
|
]
|
|
1377
1409
|
}
|
|
1378
1410
|
) });
|