@moduix/react 2.2.5 → 2.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.
@@ -0,0 +1,17 @@
1
+ import type { ChartValue } from '@tanstack/charts';
2
+ import type { RendererChartProps } from '@tanstack/charts/react/tooltip';
3
+ declare const Chart: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
4
+ Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
5
+ Plot: <TDatum, TXValue extends ChartValue = ChartValue, TYValue extends ChartValue = ChartValue>({ className, motion, renderTooltipBody, renderer, ...props }: Omit<RendererChartProps<TDatum, TXValue, TYValue>, "renderer"> & {
6
+ motion?: boolean;
7
+ renderer?: RendererChartProps<TDatum, TXValue, TYValue>["renderer"];
8
+ }) => import("react").JSX.Element;
9
+ Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
10
+ Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
11
+ Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
12
+ Legend: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
13
+ LegendItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
14
+ color?: string;
15
+ } & import("react").RefAttributes<HTMLElement>>;
16
+ };
17
+ export { Chart };
@@ -0,0 +1,156 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { ark } from "@ark-ui/react/factory";
4
+ import { motion as motion_motion } from "@tanstack/charts/motion";
5
+ import { RendererChart } from "@tanstack/charts/react/tooltip";
6
+ import { svgChartRenderer } from "@tanstack/charts/svg/renderer";
7
+ import { clsx } from "clsx";
8
+ import { forwardRef } from "react";
9
+ import { normalizeClassName } from "../../internal/normalizeClassName.js";
10
+ import Chart_module from "./Chart.module.js";
11
+ const defaultChartRenderer = motion_motion({
12
+ transition: {
13
+ type: 'spring',
14
+ stiffness: 260,
15
+ damping: 30,
16
+ mass: 0.8
17
+ }
18
+ });
19
+ const Chart_ChartRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
20
+ return /*#__PURE__*/ jsx(ark.figure, {
21
+ ref: ref,
22
+ "data-scope": "chart",
23
+ "data-part": "root",
24
+ "data-slot": "chart-root",
25
+ className: clsx(Chart_module.root, normalizeClassName(className)),
26
+ ...props
27
+ });
28
+ });
29
+ const renderDefaultTooltipBody = ({ content })=>{
30
+ if ('string' == typeof content) return /*#__PURE__*/ jsx("span", {
31
+ "data-slot": "chart-tooltip-text",
32
+ children: content
33
+ });
34
+ return /*#__PURE__*/ jsxs("div", {
35
+ "data-slot": "chart-tooltip-body",
36
+ className: Chart_module.defaultTooltipContent,
37
+ children: [
38
+ content.title ? /*#__PURE__*/ jsxs("div", {
39
+ "data-slot": "chart-tooltip-title",
40
+ className: Chart_module.tooltipTitle,
41
+ children: [
42
+ content.color ? /*#__PURE__*/ jsx("span", {
43
+ "aria-hidden": "true",
44
+ "data-slot": "chart-tooltip-swatch",
45
+ className: Chart_module.tooltipSwatch,
46
+ style: {
47
+ backgroundColor: content.color
48
+ }
49
+ }) : null,
50
+ content.title
51
+ ]
52
+ }) : null,
53
+ content.rows.length ? /*#__PURE__*/ jsx("div", {
54
+ "data-slot": "chart-tooltip-rows",
55
+ className: Chart_module.tooltipRows,
56
+ children: content.rows.map((row, index)=>/*#__PURE__*/ jsxs("div", {
57
+ "data-has-swatch": row.color ? '' : void 0,
58
+ "data-slot": "chart-tooltip-row",
59
+ className: Chart_module.tooltipRow,
60
+ children: [
61
+ row.color ? /*#__PURE__*/ jsx("span", {
62
+ "aria-hidden": "true",
63
+ "data-slot": "chart-tooltip-swatch",
64
+ className: Chart_module.tooltipSwatch,
65
+ style: {
66
+ backgroundColor: row.color
67
+ }
68
+ }) : null,
69
+ /*#__PURE__*/ jsx("span", {
70
+ "data-slot": "chart-tooltip-label",
71
+ className: Chart_module.tooltipLabel,
72
+ children: row.label
73
+ }),
74
+ /*#__PURE__*/ jsx("span", {
75
+ "data-slot": "chart-tooltip-value",
76
+ className: Chart_module.tooltipValue,
77
+ children: row.value
78
+ })
79
+ ]
80
+ }, `${row.label}-${index}`))
81
+ }) : null
82
+ ]
83
+ });
84
+ };
85
+ const Chart_ChartPlot = function({ className, motion = true, renderTooltipBody, renderer, ...props }) {
86
+ return /*#__PURE__*/ jsx(RendererChart, {
87
+ ...props,
88
+ renderer: renderer ?? (motion ? defaultChartRenderer : svgChartRenderer),
89
+ renderTooltipBody: renderTooltipBody ?? renderDefaultTooltipBody,
90
+ className: clsx(Chart_module.plot, normalizeClassName(className))
91
+ });
92
+ };
93
+ const Chart_ChartHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
94
+ return /*#__PURE__*/ jsx(ark.figcaption, {
95
+ ref: ref,
96
+ "data-scope": "chart",
97
+ "data-part": "header",
98
+ "data-slot": "chart-header",
99
+ className: clsx(Chart_module.header, normalizeClassName(className)),
100
+ ...props
101
+ });
102
+ });
103
+ const Chart_ChartTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
104
+ return /*#__PURE__*/ jsx(ark.h3, {
105
+ ref: ref,
106
+ "data-scope": "chart",
107
+ "data-part": "title",
108
+ "data-slot": "chart-title",
109
+ className: clsx(Chart_module.title, normalizeClassName(className)),
110
+ ...props
111
+ });
112
+ });
113
+ const Chart_ChartDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
114
+ return /*#__PURE__*/ jsx(ark.p, {
115
+ ref: ref,
116
+ "data-scope": "chart",
117
+ "data-part": "description",
118
+ "data-slot": "chart-description",
119
+ className: clsx(Chart_module.description, normalizeClassName(className)),
120
+ ...props
121
+ });
122
+ });
123
+ const Chart_ChartLegend = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
124
+ return /*#__PURE__*/ jsx(ark.ul, {
125
+ ref: ref,
126
+ "data-scope": "chart",
127
+ "data-part": "legend",
128
+ "data-slot": "chart-legend",
129
+ className: clsx(Chart_module.legend, normalizeClassName(className)),
130
+ ...props
131
+ });
132
+ });
133
+ const Chart_ChartLegendItem = /*#__PURE__*/ forwardRef(function({ className, color, style, ...props }, ref) {
134
+ return /*#__PURE__*/ jsx(ark.li, {
135
+ ref: ref,
136
+ "data-scope": "chart",
137
+ "data-part": "legend-item",
138
+ "data-slot": "chart-legend-item",
139
+ className: clsx(Chart_module.legendItem, normalizeClassName(className)),
140
+ style: color ? {
141
+ '--moduix-chart-legend-indicator-color': color,
142
+ ...style
143
+ } : style,
144
+ ...props
145
+ });
146
+ });
147
+ const Chart = Object.assign(Chart_ChartRoot, {
148
+ Root: Chart_ChartRoot,
149
+ Plot: Chart_ChartPlot,
150
+ Header: Chart_ChartHeader,
151
+ Title: Chart_ChartTitle,
152
+ Description: Chart_ChartDescription,
153
+ Legend: Chart_ChartLegend,
154
+ LegendItem: Chart_ChartLegendItem
155
+ });
156
+ export { Chart };
@@ -0,0 +1,18 @@
1
+ import "./Chart_module.css";
2
+ const Chart_module = {
3
+ root: "root-zPwhEi",
4
+ plot: "plot-Ww_CVs",
5
+ header: "header-_H34PS",
6
+ title: "title-zKDqX9",
7
+ description: "description-jUUbjj",
8
+ legend: "legend-iiFN8q",
9
+ legendItem: "legendItem-B4_u7q",
10
+ defaultTooltipContent: "defaultTooltipContent-EbORpR",
11
+ tooltipRows: "tooltipRows-x57rNP",
12
+ tooltipTitle: "tooltipTitle-rt8wqo",
13
+ tooltipRow: "tooltipRow-ZRjXCf",
14
+ tooltipSwatch: "tooltipSwatch-a9pNfu",
15
+ tooltipLabel: "tooltipLabel-gfLt3N",
16
+ tooltipValue: "tooltipValue-HkEHds"
17
+ };
18
+ export default Chart_module;
@@ -0,0 +1,138 @@
1
+ @layer moduix.components {
2
+ .root-zPwhEi {
3
+ box-sizing: border-box;
4
+ gap: var(--moduix-chart-gap, var(--moduix-spacing-5));
5
+ width: 100%;
6
+ min-width: 0;
7
+ padding: var(--moduix-chart-padding, var(--moduix-spacing-5));
8
+ border: var(--moduix-chart-border-width, var(--moduix-border-width-sm)) solid
9
+ var(--moduix-chart-border-color, var(--moduix-color-border));
10
+ border-radius: var(--moduix-chart-radius, var(--moduix-radius-lg));
11
+ background-color: var(--moduix-chart-bg, var(--moduix-color-card));
12
+ box-shadow: var(--moduix-chart-shadow, var(--moduix-shadow-sm));
13
+ color: var(--moduix-color-card-foreground);
14
+ margin: 0;
15
+ display: grid;
16
+ }
17
+
18
+ .plot-Ww_CVs {
19
+ border-radius: var(--moduix-chart-plot-radius, var(--moduix-radius-md));
20
+ min-width: 0;
21
+ color: var(--moduix-chart-axis-color, var(--moduix-color-muted-foreground));
22
+ --ts-chart-tooltip-background: var(--moduix-chart-tooltip-bg, var(--moduix-color-popover));
23
+ --ts-chart-tooltip-border: var(--moduix-chart-tooltip-border-width, var(--moduix-border-width-sm))
24
+ solid var(--moduix-chart-tooltip-border-color, var(--moduix-color-border));
25
+ --ts-chart-tooltip-border-radius: var(--moduix-chart-tooltip-radius, var(--moduix-radius-md));
26
+ --ts-chart-tooltip-color: var(--moduix-chart-tooltip-color, var(--moduix-color-popover-foreground));
27
+ --ts-chart-tooltip-font: var(--moduix-weight-medium)
28
+ var(--moduix-chart-tooltip-font-size, var(--moduix-text-xs)) /
29
+ var(--moduix-chart-tooltip-line-height, var(--moduix-line-height-text-xs))
30
+ var(--moduix-font-sans);
31
+ --ts-chart-tooltip-padding: var(--moduix-chart-tooltip-padding, var(--moduix-spacing-3));
32
+ --ts-chart-tooltip-shadow: var(--moduix-chart-tooltip-shadow, var(--moduix-shadow-lg));
33
+ }
34
+
35
+ .plot-Ww_CVs .ts-chart {
36
+ border-radius: var(--moduix-chart-plot-radius, var(--moduix-radius-md));
37
+ outline: none;
38
+ }
39
+
40
+ .plot-Ww_CVs .ts-chart:focus-visible {
41
+ outline: var(--moduix-chart-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
42
+ solid var(--moduix-chart-focus-ring-color, var(--moduix-color-ring));
43
+ outline-offset: var(--moduix-chart-focus-ring-offset, var(--moduix-focus-ring-offset));
44
+ }
45
+
46
+ .header-_H34PS {
47
+ gap: var(--moduix-spacing-1);
48
+ display: grid;
49
+ }
50
+
51
+ .title-zKDqX9 {
52
+ color: currentColor;
53
+ font-size: var(--moduix-text-lg);
54
+ font-weight: var(--moduix-weight-semibold);
55
+ line-height: var(--moduix-line-height-text-lg);
56
+ margin: 0;
57
+ }
58
+
59
+ .description-jUUbjj {
60
+ color: var(--moduix-color-muted-foreground);
61
+ font-size: var(--moduix-text-sm);
62
+ line-height: var(--moduix-line-height-text-sm);
63
+ margin: 0;
64
+ }
65
+
66
+ .legend-iiFN8q {
67
+ gap: var(--moduix-spacing-3);
68
+ flex-wrap: wrap;
69
+ margin: 0;
70
+ padding: 0;
71
+ list-style: none;
72
+ display: flex;
73
+ }
74
+
75
+ .legendItem-B4_u7q {
76
+ align-items: center;
77
+ gap: var(--moduix-spacing-2);
78
+ color: var(--moduix-color-muted-foreground);
79
+ font-size: var(--moduix-text-sm);
80
+ line-height: var(--moduix-line-height-text-sm);
81
+ display: inline-flex;
82
+ }
83
+
84
+ .legendItem-B4_u7q:before {
85
+ width: var(--moduix-spacing-2-5);
86
+ height: var(--moduix-spacing-2-5);
87
+ border-radius: var(--moduix-radius-full);
88
+ background-color: var(--moduix-chart-legend-indicator-color, var(--moduix-color-muted-foreground));
89
+ box-shadow: inset 0 0 0 var(--moduix-border-width-sm) #00000014;
90
+ content: "";
91
+ flex: none;
92
+ }
93
+
94
+ .defaultTooltipContent-EbORpR, .tooltipRows-x57rNP {
95
+ gap: var(--moduix-spacing-1);
96
+ display: grid;
97
+ }
98
+
99
+ .tooltipTitle-rt8wqo {
100
+ align-items: center;
101
+ gap: var(--moduix-spacing-2);
102
+ color: var(--moduix-color-popover-foreground);
103
+ font-weight: var(--moduix-weight-semibold);
104
+ display: flex;
105
+ }
106
+
107
+ .tooltipRow-ZRjXCf {
108
+ align-items: center;
109
+ column-gap: var(--moduix-spacing-2);
110
+ grid-template-columns: minmax(0, 1fr) auto;
111
+ display: grid;
112
+ }
113
+
114
+ .tooltipRow-ZRjXCf[data-has-swatch] {
115
+ grid-template-columns: var(--moduix-spacing-2-5) minmax(0, 1fr) auto;
116
+ }
117
+
118
+ .tooltipSwatch-a9pNfu {
119
+ width: var(--moduix-spacing-2-5);
120
+ height: var(--moduix-spacing-2-5);
121
+ border-radius: var(--moduix-radius-full);
122
+ box-shadow: inset 0 0 0 var(--moduix-border-width-sm) #00000014;
123
+ }
124
+
125
+ .tooltipLabel-gfLt3N {
126
+ min-width: 0;
127
+ color: var(--moduix-color-muted-foreground);
128
+ }
129
+
130
+ .tooltipValue-HkEHds {
131
+ color: var(--moduix-color-popover-foreground);
132
+ font-weight: var(--moduix-weight-semibold);
133
+ font-variant-numeric: tabular-nums;
134
+ text-align: right;
135
+ white-space: nowrap;
136
+ }
137
+ }
138
+
@@ -0,0 +1 @@
1
+ export * from './Chart.js';
@@ -0,0 +1 @@
1
+ export * from "./Chart.js";
@@ -2,6 +2,7 @@
2
2
  .root-HI0WAX {
3
3
  box-sizing: border-box;
4
4
  overscroll-behavior-inline: contain;
5
+ scrollbar-width: none;
5
6
  --moduix-toggle-color: var(--moduix-toggle-group-color, var(--moduix-color-foreground));
6
7
  align-items: center;
7
8
  gap: var(--moduix-toggle-group-gap, var(--moduix-border-width-sm));
@@ -16,6 +17,10 @@
16
17
  overflow-x: auto;
17
18
  }
18
19
 
20
+ .root-HI0WAX::-webkit-scrollbar {
21
+ display: none;
22
+ }
23
+
19
24
  .root-HI0WAX[data-orientation="vertical"] {
20
25
  flex-direction: column;
21
26
  align-items: stretch;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moduix/react",
3
- "version": "2.2.5",
3
+ "version": "2.3.0",
4
4
  "description": "React implementation of the moduix component system, built on Ark UI primitives.",
5
5
  "keywords": [
6
6
  "accessible",
@@ -91,6 +91,10 @@
91
91
  "types": "./dist/components/carousel/index.d.ts",
92
92
  "import": "./dist/components/carousel/index.js"
93
93
  },
94
+ "./chart": {
95
+ "types": "./dist/components/chart/index.d.ts",
96
+ "import": "./dist/components/chart/index.js"
97
+ },
94
98
  "./checkbox": {
95
99
  "types": "./dist/components/checkbox/index.d.ts",
96
100
  "import": "./dist/components/checkbox/index.js"
@@ -393,15 +397,6 @@
393
397
  "publishConfig": {
394
398
  "access": "public"
395
399
  },
396
- "scripts": {
397
- "build": "rslib",
398
- "build:storybook": "storybook build",
399
- "dev": "rslib --watch --no-clean",
400
- "storybook": "storybook dev -p 6006 --no-open",
401
- "test": "rstest run",
402
- "test:watch": "rstest --watch",
403
- "tsc:check": "tsc --noEmit"
404
- },
405
400
  "dependencies": {
406
401
  "@unpic/core": "^1.0.3",
407
402
  "@unpic/react": "^1.0.2",
@@ -418,9 +413,11 @@
418
413
  "@rstest/core": "^0.11.6",
419
414
  "@storybook/addon-docs": "^10.5.3",
420
415
  "@storybook/react": "^10.5.3",
416
+ "@tanstack/charts": "^0.14.0",
421
417
  "@testing-library/dom": "^10.4.1",
422
418
  "@testing-library/jest-dom": "^6.9.1",
423
419
  "@testing-library/react": "^16.3.2",
420
+ "@testing-library/user-event": "^14.6.1",
424
421
  "@types/node": "^24.13.2",
425
422
  "@types/react": "^19.2.17",
426
423
  "@types/react-dom": "^19.2.3",
@@ -434,7 +431,22 @@
434
431
  },
435
432
  "peerDependencies": {
436
433
  "@ark-ui/react": "^5.37.2",
434
+ "@tanstack/charts": "^0.14.0",
437
435
  "react": "^18 || ^19",
438
436
  "react-dom": "^18 || ^19"
437
+ },
438
+ "peerDependenciesMeta": {
439
+ "@tanstack/charts": {
440
+ "optional": true
441
+ }
442
+ },
443
+ "scripts": {
444
+ "build": "rslib",
445
+ "build:storybook": "storybook build",
446
+ "dev": "rslib --watch --no-clean",
447
+ "storybook": "storybook dev -p 6006 --no-open",
448
+ "test": "rstest run",
449
+ "test:watch": "rstest --watch",
450
+ "tsc:check": "tsc --noEmit"
439
451
  }
440
452
  }