@dataimago/ui 0.1.0-alpha.1 → 0.1.0-alpha.3
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 +18 -1
- package/dist/index.cjs +195 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +97 -3
- package/dist/index.d.ts +97 -3
- package/dist/index.js +191 -9
- package/dist/index.js.map +1 -1
- package/package.json +19 -7
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ React components for the dataimago ethical AI design system.
|
|
|
9
9
|
- `react` ≥ 18
|
|
10
10
|
- `react-dom` ≥ 18
|
|
11
11
|
- `@dataimago/tokens` ≥ 0.1.0-alpha.0
|
|
12
|
-
- `@dataimago/css` ≥ 0.1.0-alpha.0 (visual styling
|
|
12
|
+
- `@dataimago/css` ≥ 0.1.0-alpha.0 (visual styling consumes the semantic CSS variables emitted by this package)
|
|
13
13
|
|
|
14
14
|
## Alpha scope
|
|
15
15
|
|
|
@@ -29,3 +29,20 @@ Additional components get harvested from consumer prototypes (`dataimago-ai`, `d
|
|
|
29
29
|
```bash
|
|
30
30
|
pnpm --filter @dataimago/ui build
|
|
31
31
|
```
|
|
32
|
+
|
|
33
|
+
## Storybook
|
|
34
|
+
|
|
35
|
+
Storybook is the local workshop for validating dataimago components and visual
|
|
36
|
+
directions before they are harvested into the published package or adopted by
|
|
37
|
+
`dataimago-ai`.
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
pnpm --filter @dataimago/ui storybook
|
|
41
|
+
pnpm --filter @dataimago/ui build-storybook
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The Storybook preview imports `@dataimago/css/dataimago.css`, so stories should
|
|
45
|
+
use semantic CSS variables rather than app-local Tailwind classes. When the dev
|
|
46
|
+
server is running, the Storybook MCP addon is available at
|
|
47
|
+
`http://localhost:6006/mcp` for AI-assisted component discovery and story
|
|
48
|
+
testing.
|
package/dist/index.cjs
CHANGED
|
@@ -30,7 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
-
Button: () => Button
|
|
33
|
+
Button: () => Button,
|
|
34
|
+
LogoMonogram: () => LogoMonogram,
|
|
35
|
+
LogoMonogramBg: () => LogoMonogramBg,
|
|
36
|
+
LogoWordmark: () => LogoWordmark
|
|
34
37
|
});
|
|
35
38
|
module.exports = __toCommonJS(index_exports);
|
|
36
39
|
|
|
@@ -38,19 +41,67 @@ module.exports = __toCommonJS(index_exports);
|
|
|
38
41
|
var React = __toESM(require("react"), 1);
|
|
39
42
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
43
|
var variantClasses = {
|
|
41
|
-
primary: "
|
|
42
|
-
secondary: "
|
|
43
|
-
ghost: "
|
|
44
|
+
primary: "di-ui-button--primary",
|
|
45
|
+
secondary: "di-ui-button--secondary",
|
|
46
|
+
ghost: "di-ui-button--ghost"
|
|
44
47
|
};
|
|
45
48
|
var sizeClasses = {
|
|
46
|
-
sm: "
|
|
47
|
-
md: "
|
|
48
|
-
lg: "
|
|
49
|
+
sm: "di-ui-button--sm",
|
|
50
|
+
md: "di-ui-button--md",
|
|
51
|
+
lg: "di-ui-button--lg"
|
|
52
|
+
};
|
|
53
|
+
var baseStyle = {
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
borderRadius: "var(--radius-md, 0.5rem)",
|
|
56
|
+
borderStyle: "solid",
|
|
57
|
+
borderWidth: "1px",
|
|
58
|
+
cursor: "pointer",
|
|
59
|
+
display: "inline-flex",
|
|
60
|
+
fontFamily: "var(--font-family-sans, system-ui, sans-serif)",
|
|
61
|
+
fontWeight: "var(--font-weight-medium, 500)",
|
|
62
|
+
gap: "var(--spacing-sm, 0.5rem)",
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
textDecoration: "none",
|
|
65
|
+
transition: "background-color 150ms ease, border-color 150ms ease, color 150ms ease"
|
|
66
|
+
};
|
|
67
|
+
var variantStyles = {
|
|
68
|
+
primary: {
|
|
69
|
+
backgroundColor: "var(--color-interactive-primary)",
|
|
70
|
+
borderColor: "var(--color-interactive-primary)",
|
|
71
|
+
color: "var(--color-content-inverse)"
|
|
72
|
+
},
|
|
73
|
+
secondary: {
|
|
74
|
+
backgroundColor: "var(--color-surface-elevated)",
|
|
75
|
+
borderColor: "var(--color-border-moderate)",
|
|
76
|
+
color: "var(--color-content-primary)"
|
|
77
|
+
},
|
|
78
|
+
ghost: {
|
|
79
|
+
backgroundColor: "transparent",
|
|
80
|
+
borderColor: "transparent",
|
|
81
|
+
color: "var(--color-content-secondary)"
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
var sizeStyles = {
|
|
85
|
+
sm: {
|
|
86
|
+
fontSize: "var(--font-size-small, 0.875rem)",
|
|
87
|
+
minHeight: "2rem",
|
|
88
|
+
padding: "0.375rem 0.75rem"
|
|
89
|
+
},
|
|
90
|
+
md: {
|
|
91
|
+
fontSize: "var(--font-size-base, 1rem)",
|
|
92
|
+
minHeight: "2.5rem",
|
|
93
|
+
padding: "0.625rem 1rem"
|
|
94
|
+
},
|
|
95
|
+
lg: {
|
|
96
|
+
fontSize: "var(--font-size-readable, 1.125rem)",
|
|
97
|
+
minHeight: "3rem",
|
|
98
|
+
padding: "0.75rem 1.25rem"
|
|
99
|
+
}
|
|
49
100
|
};
|
|
50
101
|
var Button = React.forwardRef(
|
|
51
|
-
function Button2({ variant = "primary", size = "md", className = "", type, children, ...rest }, ref) {
|
|
102
|
+
function Button2({ variant = "primary", size = "md", className = "", style, type, children, ...rest }, ref) {
|
|
52
103
|
const classes = [
|
|
53
|
-
"
|
|
104
|
+
"di-ui-button",
|
|
54
105
|
variantClasses[variant],
|
|
55
106
|
sizeClasses[size],
|
|
56
107
|
className
|
|
@@ -61,14 +112,148 @@ var Button = React.forwardRef(
|
|
|
61
112
|
ref,
|
|
62
113
|
type: type ?? "button",
|
|
63
114
|
className: classes,
|
|
115
|
+
style: {
|
|
116
|
+
...baseStyle,
|
|
117
|
+
...variantStyles[variant],
|
|
118
|
+
...sizeStyles[size],
|
|
119
|
+
...style
|
|
120
|
+
},
|
|
64
121
|
...rest,
|
|
65
122
|
children
|
|
66
123
|
}
|
|
67
124
|
);
|
|
68
125
|
}
|
|
69
126
|
);
|
|
127
|
+
|
|
128
|
+
// src/brand/LogoMonogram.tsx
|
|
129
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
130
|
+
function LogoMonogram({
|
|
131
|
+
size = 24,
|
|
132
|
+
title = "dataimago",
|
|
133
|
+
...rest
|
|
134
|
+
}) {
|
|
135
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
137
|
+
"svg",
|
|
138
|
+
{
|
|
139
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
140
|
+
viewBox: "0 0 480 480",
|
|
141
|
+
width: size,
|
|
142
|
+
height: size,
|
|
143
|
+
fill: "currentColor",
|
|
144
|
+
"aria-label": title,
|
|
145
|
+
...a11yProps,
|
|
146
|
+
...rest,
|
|
147
|
+
children: [
|
|
148
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: title }) : null,
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z" }),
|
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z" })
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// src/brand/LogoMonogramBg.tsx
|
|
157
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
158
|
+
function LogoMonogramBg({
|
|
159
|
+
size = 32,
|
|
160
|
+
title = "dataimago",
|
|
161
|
+
...rest
|
|
162
|
+
}) {
|
|
163
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
165
|
+
"svg",
|
|
166
|
+
{
|
|
167
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
168
|
+
viewBox: "0 0 480 480",
|
|
169
|
+
width: size,
|
|
170
|
+
height: size,
|
|
171
|
+
"aria-label": title,
|
|
172
|
+
...a11yProps,
|
|
173
|
+
...rest,
|
|
174
|
+
children: [
|
|
175
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: title }) : null,
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
177
|
+
"rect",
|
|
178
|
+
{
|
|
179
|
+
width: "100%",
|
|
180
|
+
height: "100%",
|
|
181
|
+
rx: "40",
|
|
182
|
+
ry: "40",
|
|
183
|
+
fill: "var(--color-interactive-accent, #b54a27)"
|
|
184
|
+
}
|
|
185
|
+
),
|
|
186
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
187
|
+
"path",
|
|
188
|
+
{
|
|
189
|
+
fill: "#ffffff",
|
|
190
|
+
d: "M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z"
|
|
191
|
+
}
|
|
192
|
+
),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
194
|
+
"path",
|
|
195
|
+
{
|
|
196
|
+
fill: "#ffffff",
|
|
197
|
+
d: "m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z"
|
|
198
|
+
}
|
|
199
|
+
)
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// src/brand/LogoWordmark.tsx
|
|
206
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
207
|
+
function LogoWordmark({
|
|
208
|
+
width = 240,
|
|
209
|
+
title = "dataimago",
|
|
210
|
+
...rest
|
|
211
|
+
}) {
|
|
212
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
214
|
+
"svg",
|
|
215
|
+
{
|
|
216
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
217
|
+
viewBox: "0 0 480 150",
|
|
218
|
+
width,
|
|
219
|
+
"aria-label": title,
|
|
220
|
+
...a11yProps,
|
|
221
|
+
...rest,
|
|
222
|
+
children: [
|
|
223
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: title }) : null,
|
|
224
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
225
|
+
"rect",
|
|
226
|
+
{
|
|
227
|
+
width: "100%",
|
|
228
|
+
height: "100%",
|
|
229
|
+
rx: "5",
|
|
230
|
+
ry: "5",
|
|
231
|
+
fill: "var(--color-interactive-accent, #b54a27)"
|
|
232
|
+
}
|
|
233
|
+
),
|
|
234
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
235
|
+
"path",
|
|
236
|
+
{
|
|
237
|
+
fill: "#ffffff",
|
|
238
|
+
d: "M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z"
|
|
239
|
+
}
|
|
240
|
+
),
|
|
241
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
242
|
+
"path",
|
|
243
|
+
{
|
|
244
|
+
fill: "#ffffff",
|
|
245
|
+
d: "m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z"
|
|
246
|
+
}
|
|
247
|
+
)
|
|
248
|
+
]
|
|
249
|
+
}
|
|
250
|
+
);
|
|
251
|
+
}
|
|
70
252
|
// Annotate the CommonJS export names for ESM import in node:
|
|
71
253
|
0 && (module.exports = {
|
|
72
|
-
Button
|
|
254
|
+
Button,
|
|
255
|
+
LogoMonogram,
|
|
256
|
+
LogoMonogramBg,
|
|
257
|
+
LogoWordmark
|
|
73
258
|
});
|
|
74
259
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Button.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'btn-primary',\n secondary: 'btn-secondary',\n ghost: 'btn-ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'btn-sm',\n md: 'btn-md',\n lg: 'btn-lg',\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`\n * published by @dataimago/css so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'btn',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AA6CjB;AAlCN,IAAM,iBAAgD;AAAA,EACpD,SAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAW;AACb;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,IAAM,SAAe;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,OAAO,MAAM,YAAY,IAAI,MAAM,UAAU,GAAG,KAAK,GAC5E,KACA;AACA,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,YAAY,IAAI;AAAA,MAChB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["Button"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n\n// Brand assets (outlined-path SVG components — no font dependency at render).\n// See packages/ui/src/brand/Logos.stories.tsx for visual reference.\nexport { LogoMonogram } from './brand/LogoMonogram.js';\nexport type { LogoMonogramProps } from './brand/LogoMonogram.js';\nexport { LogoMonogramBg } from './brand/LogoMonogramBg.js';\nexport type { LogoMonogramBgProps } from './brand/LogoMonogramBg.js';\nexport { LogoWordmark } from './brand/LogoWordmark.js';\nexport type { LogoWordmarkProps } from './brand/LogoWordmark.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the historical brand-red role\n * (var(--color-interactive-accent), the emancipation copper-red).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), so the mark\n * picks up the canonical accent color in both light and dark modes. The\n * letter fill is hard-set to white because the accent backplate is dark\n * enough that white letters always have AAA contrast (verified in iteration-1).\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #b54a27)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate (the historical brand-red role,\n * var(--color-interactive-accent)).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #b54a27)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["Button","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost';
|
|
4
5
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
@@ -9,10 +10,103 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
9
10
|
/**
|
|
10
11
|
* Smoke-level `<Button>` for the alpha release of @dataimago/ui.
|
|
11
12
|
*
|
|
12
|
-
* Styling is delegated to
|
|
13
|
-
*
|
|
13
|
+
* Styling is delegated to semantic CSS variables published by @dataimago/css
|
|
14
|
+
* so that the component stays small and theme-aware.
|
|
14
15
|
* Consumers that want to override visuals can pass their own className.
|
|
15
16
|
*/
|
|
16
17
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
/**
|
|
20
|
+
* <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent
|
|
21
|
+
* background. Glyphs are outlined paths (no font dependency at render time);
|
|
22
|
+
* fill defaults to `currentColor` so the mark inherits from the surrounding
|
|
23
|
+
* text color and respects light/dark theme switches automatically.
|
|
24
|
+
*
|
|
25
|
+
* Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the
|
|
26
|
+
* fusion is the brand's central idea. See wiki/principles/visual-identity.md
|
|
27
|
+
* (Stage L follow-up) for the full brand-mark rationale.
|
|
28
|
+
*
|
|
29
|
+
* Source artwork: outlined-path SVG from
|
|
30
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
31
|
+
* ai_monogram_supreme_1_PATH.svg
|
|
32
|
+
*
|
|
33
|
+
* Usage:
|
|
34
|
+
* <LogoMonogram size={48} aria-label="dataimago" />
|
|
35
|
+
* <span style={{ color: 'var(--color-interactive-primary)' }}>
|
|
36
|
+
* <LogoMonogram size={32} />
|
|
37
|
+
* </span>
|
|
38
|
+
*/
|
|
39
|
+
interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {
|
|
40
|
+
/** Render size in px (or any CSS length). Default: 24. Width and height match. */
|
|
41
|
+
size?: number | string;
|
|
42
|
+
/**
|
|
43
|
+
* Accessible name announced by screen readers. Set to `undefined` (or pass
|
|
44
|
+
* `aria-hidden` directly) when the mark is purely decorative.
|
|
45
|
+
*/
|
|
46
|
+
title?: string;
|
|
47
|
+
}
|
|
48
|
+
declare function LogoMonogram({ size, title, ...rest }: LogoMonogramProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent
|
|
52
|
+
* backplate. White letters on the historical brand-red role
|
|
53
|
+
* (var(--color-interactive-accent), the emancipation copper-red).
|
|
54
|
+
*
|
|
55
|
+
* Use this variant on neutral surfaces where the no-background monogram
|
|
56
|
+
* would lack presence — favicons, app icons, social-media avatars, or any
|
|
57
|
+
* branded chrome where the mark should read as a self-contained badge.
|
|
58
|
+
*
|
|
59
|
+
* Source artwork: outlined-path SVG from
|
|
60
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
61
|
+
* ai_monogram_supreme_bg_1_PATH.svg
|
|
62
|
+
*
|
|
63
|
+
* Theming: the background uses var(--color-interactive-accent), so the mark
|
|
64
|
+
* picks up the canonical accent color in both light and dark modes. The
|
|
65
|
+
* letter fill is hard-set to white because the accent backplate is dark
|
|
66
|
+
* enough that white letters always have AAA contrast (verified in iteration-1).
|
|
67
|
+
*
|
|
68
|
+
* Usage:
|
|
69
|
+
* <LogoMonogramBg size={64} aria-label="dataimago" />
|
|
70
|
+
*/
|
|
71
|
+
interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {
|
|
72
|
+
/** Render size in px. Default: 32 (favicon-sized). Width and height match. */
|
|
73
|
+
size?: number | string;
|
|
74
|
+
/** Accessible name. Set undefined or pass aria-hidden for decorative use. */
|
|
75
|
+
title?: string;
|
|
76
|
+
}
|
|
77
|
+
declare function LogoMonogramBg({ size, title, ...rest }: LogoMonogramBgProps): react_jsx_runtime.JSX.Element;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* <LogoWordmark /> — the full "dataimago" wordmark with the 'ai' overlap.
|
|
81
|
+
* White letters on a rounded accent backplate (the historical brand-red role,
|
|
82
|
+
* var(--color-interactive-accent)).
|
|
83
|
+
*
|
|
84
|
+
* Use this variant for primary brand surfaces: site headers, document
|
|
85
|
+
* letterheads, large-format presentations, business materials. For compact
|
|
86
|
+
* contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for
|
|
87
|
+
* inline use within prose use <LogoMonogram /> with currentColor.
|
|
88
|
+
*
|
|
89
|
+
* The wordmark preserves the philosophical idea of the brand: the visible
|
|
90
|
+
* superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new
|
|
91
|
+
* unified glyph that is neither pure human nor pure artificial — genuine
|
|
92
|
+
* collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).
|
|
93
|
+
*
|
|
94
|
+
* Source artwork: outlined-path SVG from
|
|
95
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
96
|
+
* dataimago_supreme_1_PATH.svg
|
|
97
|
+
*
|
|
98
|
+
* Usage:
|
|
99
|
+
* <LogoWordmark width={240} aria-label="dataimago" />
|
|
100
|
+
*
|
|
101
|
+
* The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and
|
|
102
|
+
* height auto-scales, or pass both explicitly.
|
|
103
|
+
*/
|
|
104
|
+
interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {
|
|
105
|
+
/** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */
|
|
106
|
+
width?: number | string;
|
|
107
|
+
/** Accessible name. Set undefined or pass aria-hidden for decorative use. */
|
|
108
|
+
title?: string;
|
|
109
|
+
}
|
|
110
|
+
declare function LogoWordmark({ width, title, ...rest }: LogoWordmarkProps): react_jsx_runtime.JSX.Element;
|
|
111
|
+
|
|
112
|
+
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, LogoWordmark, type LogoWordmarkProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost';
|
|
4
5
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
@@ -9,10 +10,103 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
9
10
|
/**
|
|
10
11
|
* Smoke-level `<Button>` for the alpha release of @dataimago/ui.
|
|
11
12
|
*
|
|
12
|
-
* Styling is delegated to
|
|
13
|
-
*
|
|
13
|
+
* Styling is delegated to semantic CSS variables published by @dataimago/css
|
|
14
|
+
* so that the component stays small and theme-aware.
|
|
14
15
|
* Consumers that want to override visuals can pass their own className.
|
|
15
16
|
*/
|
|
16
17
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
/**
|
|
20
|
+
* <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent
|
|
21
|
+
* background. Glyphs are outlined paths (no font dependency at render time);
|
|
22
|
+
* fill defaults to `currentColor` so the mark inherits from the surrounding
|
|
23
|
+
* text color and respects light/dark theme switches automatically.
|
|
24
|
+
*
|
|
25
|
+
* Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the
|
|
26
|
+
* fusion is the brand's central idea. See wiki/principles/visual-identity.md
|
|
27
|
+
* (Stage L follow-up) for the full brand-mark rationale.
|
|
28
|
+
*
|
|
29
|
+
* Source artwork: outlined-path SVG from
|
|
30
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
31
|
+
* ai_monogram_supreme_1_PATH.svg
|
|
32
|
+
*
|
|
33
|
+
* Usage:
|
|
34
|
+
* <LogoMonogram size={48} aria-label="dataimago" />
|
|
35
|
+
* <span style={{ color: 'var(--color-interactive-primary)' }}>
|
|
36
|
+
* <LogoMonogram size={32} />
|
|
37
|
+
* </span>
|
|
38
|
+
*/
|
|
39
|
+
interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {
|
|
40
|
+
/** Render size in px (or any CSS length). Default: 24. Width and height match. */
|
|
41
|
+
size?: number | string;
|
|
42
|
+
/**
|
|
43
|
+
* Accessible name announced by screen readers. Set to `undefined` (or pass
|
|
44
|
+
* `aria-hidden` directly) when the mark is purely decorative.
|
|
45
|
+
*/
|
|
46
|
+
title?: string;
|
|
47
|
+
}
|
|
48
|
+
declare function LogoMonogram({ size, title, ...rest }: LogoMonogramProps): react_jsx_runtime.JSX.Element;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent
|
|
52
|
+
* backplate. White letters on the historical brand-red role
|
|
53
|
+
* (var(--color-interactive-accent), the emancipation copper-red).
|
|
54
|
+
*
|
|
55
|
+
* Use this variant on neutral surfaces where the no-background monogram
|
|
56
|
+
* would lack presence — favicons, app icons, social-media avatars, or any
|
|
57
|
+
* branded chrome where the mark should read as a self-contained badge.
|
|
58
|
+
*
|
|
59
|
+
* Source artwork: outlined-path SVG from
|
|
60
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
61
|
+
* ai_monogram_supreme_bg_1_PATH.svg
|
|
62
|
+
*
|
|
63
|
+
* Theming: the background uses var(--color-interactive-accent), so the mark
|
|
64
|
+
* picks up the canonical accent color in both light and dark modes. The
|
|
65
|
+
* letter fill is hard-set to white because the accent backplate is dark
|
|
66
|
+
* enough that white letters always have AAA contrast (verified in iteration-1).
|
|
67
|
+
*
|
|
68
|
+
* Usage:
|
|
69
|
+
* <LogoMonogramBg size={64} aria-label="dataimago" />
|
|
70
|
+
*/
|
|
71
|
+
interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {
|
|
72
|
+
/** Render size in px. Default: 32 (favicon-sized). Width and height match. */
|
|
73
|
+
size?: number | string;
|
|
74
|
+
/** Accessible name. Set undefined or pass aria-hidden for decorative use. */
|
|
75
|
+
title?: string;
|
|
76
|
+
}
|
|
77
|
+
declare function LogoMonogramBg({ size, title, ...rest }: LogoMonogramBgProps): react_jsx_runtime.JSX.Element;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* <LogoWordmark /> — the full "dataimago" wordmark with the 'ai' overlap.
|
|
81
|
+
* White letters on a rounded accent backplate (the historical brand-red role,
|
|
82
|
+
* var(--color-interactive-accent)).
|
|
83
|
+
*
|
|
84
|
+
* Use this variant for primary brand surfaces: site headers, document
|
|
85
|
+
* letterheads, large-format presentations, business materials. For compact
|
|
86
|
+
* contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for
|
|
87
|
+
* inline use within prose use <LogoMonogram /> with currentColor.
|
|
88
|
+
*
|
|
89
|
+
* The wordmark preserves the philosophical idea of the brand: the visible
|
|
90
|
+
* superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new
|
|
91
|
+
* unified glyph that is neither pure human nor pure artificial — genuine
|
|
92
|
+
* collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).
|
|
93
|
+
*
|
|
94
|
+
* Source artwork: outlined-path SVG from
|
|
95
|
+
* FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/
|
|
96
|
+
* dataimago_supreme_1_PATH.svg
|
|
97
|
+
*
|
|
98
|
+
* Usage:
|
|
99
|
+
* <LogoWordmark width={240} aria-label="dataimago" />
|
|
100
|
+
*
|
|
101
|
+
* The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and
|
|
102
|
+
* height auto-scales, or pass both explicitly.
|
|
103
|
+
*/
|
|
104
|
+
interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {
|
|
105
|
+
/** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */
|
|
106
|
+
width?: number | string;
|
|
107
|
+
/** Accessible name. Set undefined or pass aria-hidden for decorative use. */
|
|
108
|
+
title?: string;
|
|
109
|
+
}
|
|
110
|
+
declare function LogoWordmark({ width, title, ...rest }: LogoWordmarkProps): react_jsx_runtime.JSX.Element;
|
|
111
|
+
|
|
112
|
+
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, LogoWordmark, type LogoWordmarkProps };
|
package/dist/index.js
CHANGED
|
@@ -2,19 +2,67 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
var variantClasses = {
|
|
5
|
-
primary: "
|
|
6
|
-
secondary: "
|
|
7
|
-
ghost: "
|
|
5
|
+
primary: "di-ui-button--primary",
|
|
6
|
+
secondary: "di-ui-button--secondary",
|
|
7
|
+
ghost: "di-ui-button--ghost"
|
|
8
8
|
};
|
|
9
9
|
var sizeClasses = {
|
|
10
|
-
sm: "
|
|
11
|
-
md: "
|
|
12
|
-
lg: "
|
|
10
|
+
sm: "di-ui-button--sm",
|
|
11
|
+
md: "di-ui-button--md",
|
|
12
|
+
lg: "di-ui-button--lg"
|
|
13
|
+
};
|
|
14
|
+
var baseStyle = {
|
|
15
|
+
alignItems: "center",
|
|
16
|
+
borderRadius: "var(--radius-md, 0.5rem)",
|
|
17
|
+
borderStyle: "solid",
|
|
18
|
+
borderWidth: "1px",
|
|
19
|
+
cursor: "pointer",
|
|
20
|
+
display: "inline-flex",
|
|
21
|
+
fontFamily: "var(--font-family-sans, system-ui, sans-serif)",
|
|
22
|
+
fontWeight: "var(--font-weight-medium, 500)",
|
|
23
|
+
gap: "var(--spacing-sm, 0.5rem)",
|
|
24
|
+
justifyContent: "center",
|
|
25
|
+
textDecoration: "none",
|
|
26
|
+
transition: "background-color 150ms ease, border-color 150ms ease, color 150ms ease"
|
|
27
|
+
};
|
|
28
|
+
var variantStyles = {
|
|
29
|
+
primary: {
|
|
30
|
+
backgroundColor: "var(--color-interactive-primary)",
|
|
31
|
+
borderColor: "var(--color-interactive-primary)",
|
|
32
|
+
color: "var(--color-content-inverse)"
|
|
33
|
+
},
|
|
34
|
+
secondary: {
|
|
35
|
+
backgroundColor: "var(--color-surface-elevated)",
|
|
36
|
+
borderColor: "var(--color-border-moderate)",
|
|
37
|
+
color: "var(--color-content-primary)"
|
|
38
|
+
},
|
|
39
|
+
ghost: {
|
|
40
|
+
backgroundColor: "transparent",
|
|
41
|
+
borderColor: "transparent",
|
|
42
|
+
color: "var(--color-content-secondary)"
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
var sizeStyles = {
|
|
46
|
+
sm: {
|
|
47
|
+
fontSize: "var(--font-size-small, 0.875rem)",
|
|
48
|
+
minHeight: "2rem",
|
|
49
|
+
padding: "0.375rem 0.75rem"
|
|
50
|
+
},
|
|
51
|
+
md: {
|
|
52
|
+
fontSize: "var(--font-size-base, 1rem)",
|
|
53
|
+
minHeight: "2.5rem",
|
|
54
|
+
padding: "0.625rem 1rem"
|
|
55
|
+
},
|
|
56
|
+
lg: {
|
|
57
|
+
fontSize: "var(--font-size-readable, 1.125rem)",
|
|
58
|
+
minHeight: "3rem",
|
|
59
|
+
padding: "0.75rem 1.25rem"
|
|
60
|
+
}
|
|
13
61
|
};
|
|
14
62
|
var Button = React.forwardRef(
|
|
15
|
-
function Button2({ variant = "primary", size = "md", className = "", type, children, ...rest }, ref) {
|
|
63
|
+
function Button2({ variant = "primary", size = "md", className = "", style, type, children, ...rest }, ref) {
|
|
16
64
|
const classes = [
|
|
17
|
-
"
|
|
65
|
+
"di-ui-button",
|
|
18
66
|
variantClasses[variant],
|
|
19
67
|
sizeClasses[size],
|
|
20
68
|
className
|
|
@@ -25,13 +73,147 @@ var Button = React.forwardRef(
|
|
|
25
73
|
ref,
|
|
26
74
|
type: type ?? "button",
|
|
27
75
|
className: classes,
|
|
76
|
+
style: {
|
|
77
|
+
...baseStyle,
|
|
78
|
+
...variantStyles[variant],
|
|
79
|
+
...sizeStyles[size],
|
|
80
|
+
...style
|
|
81
|
+
},
|
|
28
82
|
...rest,
|
|
29
83
|
children
|
|
30
84
|
}
|
|
31
85
|
);
|
|
32
86
|
}
|
|
33
87
|
);
|
|
88
|
+
|
|
89
|
+
// src/brand/LogoMonogram.tsx
|
|
90
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
91
|
+
function LogoMonogram({
|
|
92
|
+
size = 24,
|
|
93
|
+
title = "dataimago",
|
|
94
|
+
...rest
|
|
95
|
+
}) {
|
|
96
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
97
|
+
return /* @__PURE__ */ jsxs(
|
|
98
|
+
"svg",
|
|
99
|
+
{
|
|
100
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
101
|
+
viewBox: "0 0 480 480",
|
|
102
|
+
width: size,
|
|
103
|
+
height: size,
|
|
104
|
+
fill: "currentColor",
|
|
105
|
+
"aria-label": title,
|
|
106
|
+
...a11yProps,
|
|
107
|
+
...rest,
|
|
108
|
+
children: [
|
|
109
|
+
title ? /* @__PURE__ */ jsx2("title", { children: title }) : null,
|
|
110
|
+
/* @__PURE__ */ jsx2("path", { d: "m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z" }),
|
|
111
|
+
/* @__PURE__ */ jsx2("path", { d: "M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z" })
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// src/brand/LogoMonogramBg.tsx
|
|
118
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
119
|
+
function LogoMonogramBg({
|
|
120
|
+
size = 32,
|
|
121
|
+
title = "dataimago",
|
|
122
|
+
...rest
|
|
123
|
+
}) {
|
|
124
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
125
|
+
return /* @__PURE__ */ jsxs2(
|
|
126
|
+
"svg",
|
|
127
|
+
{
|
|
128
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
129
|
+
viewBox: "0 0 480 480",
|
|
130
|
+
width: size,
|
|
131
|
+
height: size,
|
|
132
|
+
"aria-label": title,
|
|
133
|
+
...a11yProps,
|
|
134
|
+
...rest,
|
|
135
|
+
children: [
|
|
136
|
+
title ? /* @__PURE__ */ jsx3("title", { children: title }) : null,
|
|
137
|
+
/* @__PURE__ */ jsx3(
|
|
138
|
+
"rect",
|
|
139
|
+
{
|
|
140
|
+
width: "100%",
|
|
141
|
+
height: "100%",
|
|
142
|
+
rx: "40",
|
|
143
|
+
ry: "40",
|
|
144
|
+
fill: "var(--color-interactive-accent, #b54a27)"
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
/* @__PURE__ */ jsx3(
|
|
148
|
+
"path",
|
|
149
|
+
{
|
|
150
|
+
fill: "#ffffff",
|
|
151
|
+
d: "M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z"
|
|
152
|
+
}
|
|
153
|
+
),
|
|
154
|
+
/* @__PURE__ */ jsx3(
|
|
155
|
+
"path",
|
|
156
|
+
{
|
|
157
|
+
fill: "#ffffff",
|
|
158
|
+
d: "m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z"
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// src/brand/LogoWordmark.tsx
|
|
167
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
168
|
+
function LogoWordmark({
|
|
169
|
+
width = 240,
|
|
170
|
+
title = "dataimago",
|
|
171
|
+
...rest
|
|
172
|
+
}) {
|
|
173
|
+
const a11yProps = title ? { role: "img" } : { "aria-hidden": true };
|
|
174
|
+
return /* @__PURE__ */ jsxs3(
|
|
175
|
+
"svg",
|
|
176
|
+
{
|
|
177
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
178
|
+
viewBox: "0 0 480 150",
|
|
179
|
+
width,
|
|
180
|
+
"aria-label": title,
|
|
181
|
+
...a11yProps,
|
|
182
|
+
...rest,
|
|
183
|
+
children: [
|
|
184
|
+
title ? /* @__PURE__ */ jsx4("title", { children: title }) : null,
|
|
185
|
+
/* @__PURE__ */ jsx4(
|
|
186
|
+
"rect",
|
|
187
|
+
{
|
|
188
|
+
width: "100%",
|
|
189
|
+
height: "100%",
|
|
190
|
+
rx: "5",
|
|
191
|
+
ry: "5",
|
|
192
|
+
fill: "var(--color-interactive-accent, #b54a27)"
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
/* @__PURE__ */ jsx4(
|
|
196
|
+
"path",
|
|
197
|
+
{
|
|
198
|
+
fill: "#ffffff",
|
|
199
|
+
d: "M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z"
|
|
200
|
+
}
|
|
201
|
+
),
|
|
202
|
+
/* @__PURE__ */ jsx4(
|
|
203
|
+
"path",
|
|
204
|
+
{
|
|
205
|
+
fill: "#ffffff",
|
|
206
|
+
d: "m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z"
|
|
207
|
+
}
|
|
208
|
+
)
|
|
209
|
+
]
|
|
210
|
+
}
|
|
211
|
+
);
|
|
212
|
+
}
|
|
34
213
|
export {
|
|
35
|
-
Button
|
|
214
|
+
Button,
|
|
215
|
+
LogoMonogram,
|
|
216
|
+
LogoMonogramBg,
|
|
217
|
+
LogoWordmark
|
|
36
218
|
};
|
|
37
219
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'btn-primary',\n secondary: 'btn-secondary',\n ghost: 'btn-ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'btn-sm',\n md: 'btn-md',\n lg: 'btn-lg',\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`\n * published by @dataimago/css so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'btn',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n"],"mappings":";AAAA,YAAY,WAAW;AA6CjB;AAlCN,IAAM,iBAAgD;AAAA,EACpD,SAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAW;AACb;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,IAAM,SAAe;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,OAAO,MAAM,YAAY,IAAI,MAAM,UAAU,GAAG,KAAK,GAC5E,KACA;AACA,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,YAAY,IAAI;AAAA,MAChB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["Button"]}
|
|
1
|
+
{"version":3,"sources":["../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n primary: 'di-ui-button--primary',\n secondary: 'di-ui-button--secondary',\n ghost: 'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n sm: 'di-ui-button--sm',\n md: 'di-ui-button--md',\n lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n alignItems: 'center',\n borderRadius: 'var(--radius-md, 0.5rem)',\n borderStyle: 'solid',\n borderWidth: '1px',\n cursor: 'pointer',\n display: 'inline-flex',\n fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n fontWeight: 'var(--font-weight-medium, 500)',\n gap: 'var(--spacing-sm, 0.5rem)',\n justifyContent: 'center',\n textDecoration: 'none',\n transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n primary: {\n backgroundColor: 'var(--color-interactive-primary)',\n borderColor: 'var(--color-interactive-primary)',\n color: 'var(--color-content-inverse)',\n },\n secondary: {\n backgroundColor: 'var(--color-surface-elevated)',\n borderColor: 'var(--color-border-moderate)',\n color: 'var(--color-content-primary)',\n },\n ghost: {\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n color: 'var(--color-content-secondary)',\n },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n sm: {\n fontSize: 'var(--font-size-small, 0.875rem)',\n minHeight: '2rem',\n padding: '0.375rem 0.75rem',\n },\n md: {\n fontSize: 'var(--font-size-base, 1rem)',\n minHeight: '2.5rem',\n padding: '0.625rem 1rem',\n },\n lg: {\n fontSize: 'var(--font-size-readable, 1.125rem)',\n minHeight: '3rem',\n padding: '0.75rem 1.25rem',\n },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n ref,\n ) {\n const classes = [\n 'di-ui-button',\n variantClasses[variant],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n ref={ref}\n type={type ?? 'button'}\n className={classes}\n style={{\n ...baseStyle,\n ...variantStyles[variant],\n ...sizeStyles[size],\n ...style,\n }}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoMonogram size={48} aria-label=\"dataimago\" />\n * <span style={{ color: 'var(--color-interactive-primary)' }}>\n * <LogoMonogram size={32} />\n * </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n size?: number | string;\n /**\n * Accessible name announced by screen readers. Set to `undefined` (or pass\n * `aria-hidden` directly) when the mark is purely decorative.\n */\n title?: string;\n}\n\nexport function LogoMonogram({\n size = 24,\n title = 'dataimago',\n ...rest\n}: LogoMonogramProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n fill=\"currentColor\"\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* 'i' (imago) glyph */}\n <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n {/* 'a' (data) glyph */}\n <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the historical brand-red role\n * (var(--color-interactive-accent), the emancipation copper-red).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), so the mark\n * picks up the canonical accent color in both light and dark modes. The\n * letter fill is hard-set to white because the accent backplate is dark\n * enough that white letters always have AAA contrast (verified in iteration-1).\n *\n * Usage:\n * <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n size?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoMonogramBg({\n size = 32,\n title = 'dataimago',\n ...rest\n}: LogoMonogramBgProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 480\"\n width={size}\n height={size}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"40\"\n ry=\"40\"\n fill=\"var(--color-interactive-accent, #b54a27)\"\n />\n {/* 'a' (data) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n />\n {/* 'i' (imago) glyph in white */}\n <path\n fill=\"#ffffff\"\n d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n />\n </svg>\n );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate (the historical brand-red role,\n * var(--color-interactive-accent)).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n * dataimago_supreme_1_PATH.svg\n *\n * Usage:\n * <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n width?: number | string;\n /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n title?: string;\n}\n\nexport function LogoWordmark({\n width = 240,\n title = 'dataimago',\n ...rest\n}: LogoWordmarkProps) {\n const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 480 150\"\n width={width}\n aria-label={title}\n {...a11yProps}\n {...rest}\n >\n {title ? <title>{title}</title> : null}\n {/* Rounded accent backplate */}\n <rect\n width=\"100%\"\n height=\"100%\"\n rx=\"5\"\n ry=\"5\"\n fill=\"var(--color-interactive-accent, #b54a27)\"\n />\n {/* \"data\" — outlined glyphs, white fill */}\n <path\n fill=\"#ffffff\"\n d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n />\n {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n <path\n fill=\"#ffffff\"\n d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n />\n </svg>\n );\n}\n"],"mappings":"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","names":["Button","jsx","jsx","jsxs","jsx","jsxs"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataimago/ui",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.3",
|
|
4
4
|
"description": "React components for the dataimago ethical AI design system",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -29,20 +29,30 @@
|
|
|
29
29
|
"README.md"
|
|
30
30
|
],
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"
|
|
33
|
-
"react-dom": ">=18",
|
|
32
|
+
"@dataimago/css": "^0.1.0-alpha.0",
|
|
34
33
|
"@dataimago/tokens": "^0.1.0-alpha.0",
|
|
35
|
-
"
|
|
34
|
+
"react": ">=18",
|
|
35
|
+
"react-dom": ">=18"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
+
"@storybook/addon-a11y": "^10.3.5",
|
|
39
|
+
"@storybook/addon-docs": "^10.3.5",
|
|
40
|
+
"@storybook/addon-mcp": "^0.6.0",
|
|
41
|
+
"@storybook/addon-vitest": "^10.3.5",
|
|
42
|
+
"@storybook/react-vite": "^10.3.5",
|
|
38
43
|
"@types/react": "^18.3.0",
|
|
39
44
|
"@types/react-dom": "^18.3.0",
|
|
45
|
+
"@vitest/browser-playwright": "^4.1.5",
|
|
46
|
+
"@vitest/coverage-v8": "^4.1.5",
|
|
47
|
+
"playwright": "^1.59.1",
|
|
40
48
|
"react": "^18.3.1",
|
|
41
49
|
"react-dom": "^18.3.1",
|
|
50
|
+
"storybook": "^10.3.5",
|
|
42
51
|
"tsup": "^8.3.0",
|
|
43
52
|
"typescript": "^5.6.0",
|
|
44
|
-
"
|
|
45
|
-
"@dataimago/
|
|
53
|
+
"vitest": "^4.1.5",
|
|
54
|
+
"@dataimago/tokens": "^0.1.0-alpha.3",
|
|
55
|
+
"@dataimago/css": "^0.1.0-alpha.3"
|
|
46
56
|
},
|
|
47
57
|
"keywords": [
|
|
48
58
|
"react",
|
|
@@ -52,6 +62,8 @@
|
|
|
52
62
|
],
|
|
53
63
|
"scripts": {
|
|
54
64
|
"build": "tsup",
|
|
55
|
-
"dev": "tsup --watch"
|
|
65
|
+
"dev": "tsup --watch",
|
|
66
|
+
"storybook": "storybook dev -p 6006",
|
|
67
|
+
"build-storybook": "storybook build"
|
|
56
68
|
}
|
|
57
69
|
}
|