@heymantle/litho 0.0.9 → 0.0.10
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/dist/cjs/components/Checkbox.js +13 -2
- package/dist/cjs/stories/Checkbox.stories.js +172 -1
- package/dist/esm/components/Checkbox.js +13 -2
- package/dist/esm/stories/Checkbox.stories.js +166 -1
- package/dist/types/components/Checkbox.d.ts +11 -2
- package/dist/types/components/Checkbox.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "default", {
|
|
|
10
10
|
});
|
|
11
11
|
var _jsxruntime = require("react/jsx-runtime");
|
|
12
12
|
var _tailwindvariants = require("tailwind-variants");
|
|
13
|
+
var _react = require("react");
|
|
13
14
|
var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
|
|
14
15
|
var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
|
|
15
16
|
var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
|
|
@@ -69,7 +70,7 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
|
|
|
69
70
|
* @component
|
|
70
71
|
*
|
|
71
72
|
* @param {Object} props - Props for the Checkbox component.
|
|
72
|
-
* @param {string} [props.label] - The
|
|
73
|
+
* @param {string|React.ReactNode} [props.label] - The label for the checkbox. Can be a string or a React element (e.g., text with a badge).
|
|
73
74
|
* @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
|
|
74
75
|
* @param {string} [props.id] - The unique identifier for the checkbox input.
|
|
75
76
|
* @param {string} [props.name] - The name attribute for the checkbox input.
|
|
@@ -88,6 +89,7 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
|
|
|
88
89
|
* @returns {JSX.Element} The rendered Checkbox component.
|
|
89
90
|
*
|
|
90
91
|
* @example
|
|
92
|
+
* // Basic usage with string label
|
|
91
93
|
* <Checkbox
|
|
92
94
|
* label="Accept Terms"
|
|
93
95
|
* id="accept-terms"
|
|
@@ -97,11 +99,20 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
|
|
|
97
99
|
* helpText="You must accept the terms to proceed."
|
|
98
100
|
* onChange={(e) => console.log('Checkbox changed:', e.target.checked)}
|
|
99
101
|
* />
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* // With React element label (e.g., text with badge)
|
|
105
|
+
* <Checkbox
|
|
106
|
+
* label={<Stack horizontal gap="xs" blockAlign="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
|
|
107
|
+
* checked={false}
|
|
108
|
+
* onChange={(checked) => console.log('Checkbox changed:', checked)}
|
|
109
|
+
* />
|
|
100
110
|
*/ function Checkbox() {
|
|
101
111
|
var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
102
112
|
var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, value = props.value, error = props.error, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_indeterminate = props.indeterminate, indeterminate = _props_indeterminate === void 0 ? false : _props_indeterminate, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, className = props.className;
|
|
103
113
|
var checked = !!_checked;
|
|
104
114
|
var hasError = !!error;
|
|
115
|
+
var labelIsReactElement = /*#__PURE__*/ (0, _react.isValidElement)(label);
|
|
105
116
|
var classes = styles({
|
|
106
117
|
disabled: disabled
|
|
107
118
|
});
|
|
@@ -164,7 +175,7 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
|
|
|
164
175
|
label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
|
|
165
176
|
tooltip: tooltip,
|
|
166
177
|
disabled: disabled,
|
|
167
|
-
as: "p",
|
|
178
|
+
as: labelIsReactElement ? "div" : "p",
|
|
168
179
|
children: label
|
|
169
180
|
})
|
|
170
181
|
]
|
|
@@ -36,6 +36,12 @@ _export(exports, {
|
|
|
36
36
|
get WithHelpText () {
|
|
37
37
|
return WithHelpText;
|
|
38
38
|
},
|
|
39
|
+
get WithReactElementLabel () {
|
|
40
|
+
return WithReactElementLabel;
|
|
41
|
+
},
|
|
42
|
+
get WithReactElementLabelAndHelpText () {
|
|
43
|
+
return WithReactElementLabelAndHelpText;
|
|
44
|
+
},
|
|
39
45
|
get default () {
|
|
40
46
|
return _default;
|
|
41
47
|
}
|
|
@@ -44,6 +50,7 @@ var _jsxruntime = require("react/jsx-runtime");
|
|
|
44
50
|
var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
|
|
45
51
|
var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
|
|
46
52
|
var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
|
|
53
|
+
var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
|
|
47
54
|
var _transformers = require("../utilities/transformers.js");
|
|
48
55
|
function _interop_require_default(obj) {
|
|
49
56
|
return obj && obj.__esModule ? obj : {
|
|
@@ -79,7 +86,7 @@ var _default = {
|
|
|
79
86
|
argTypes: {
|
|
80
87
|
label: {
|
|
81
88
|
control: 'text',
|
|
82
|
-
description: 'The
|
|
89
|
+
description: 'The label for the checkbox. Can be a string or a React element.'
|
|
83
90
|
},
|
|
84
91
|
checked: {
|
|
85
92
|
control: 'boolean',
|
|
@@ -264,3 +271,167 @@ var MultipleCheckboxes = {
|
|
|
264
271
|
}
|
|
265
272
|
}
|
|
266
273
|
};
|
|
274
|
+
var WithReactElementLabel = {
|
|
275
|
+
render: function() {
|
|
276
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
277
|
+
gap: "md",
|
|
278
|
+
children: [
|
|
279
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
280
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
281
|
+
horizontal: true,
|
|
282
|
+
gap: "xs",
|
|
283
|
+
blockAlign: "center",
|
|
284
|
+
children: [
|
|
285
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
286
|
+
children: "Premium Feature"
|
|
287
|
+
}),
|
|
288
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
289
|
+
size: "small",
|
|
290
|
+
tone: "success",
|
|
291
|
+
children: "Pro"
|
|
292
|
+
})
|
|
293
|
+
]
|
|
294
|
+
}),
|
|
295
|
+
onChange: function(checked) {
|
|
296
|
+
return console.log('Premium feature:', checked);
|
|
297
|
+
}
|
|
298
|
+
}),
|
|
299
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
300
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
301
|
+
horizontal: true,
|
|
302
|
+
gap: "xs",
|
|
303
|
+
blockAlign: "center",
|
|
304
|
+
children: [
|
|
305
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
306
|
+
children: "Beta Access"
|
|
307
|
+
}),
|
|
308
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
309
|
+
size: "small",
|
|
310
|
+
tone: "attention",
|
|
311
|
+
children: "Beta"
|
|
312
|
+
})
|
|
313
|
+
]
|
|
314
|
+
}),
|
|
315
|
+
checked: true,
|
|
316
|
+
onChange: function(checked) {
|
|
317
|
+
return console.log('Beta access:', checked);
|
|
318
|
+
}
|
|
319
|
+
}),
|
|
320
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
321
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
322
|
+
horizontal: true,
|
|
323
|
+
gap: "xs",
|
|
324
|
+
blockAlign: "center",
|
|
325
|
+
children: [
|
|
326
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
327
|
+
children: "Enterprise Only"
|
|
328
|
+
}),
|
|
329
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
330
|
+
size: "small",
|
|
331
|
+
tone: "info",
|
|
332
|
+
children: "Enterprise"
|
|
333
|
+
})
|
|
334
|
+
]
|
|
335
|
+
}),
|
|
336
|
+
onChange: function(checked) {
|
|
337
|
+
return console.log('Enterprise only:', checked);
|
|
338
|
+
}
|
|
339
|
+
})
|
|
340
|
+
]
|
|
341
|
+
});
|
|
342
|
+
},
|
|
343
|
+
parameters: {
|
|
344
|
+
docs: {
|
|
345
|
+
description: {
|
|
346
|
+
story: 'Checkbox labels can be React elements, allowing for rich content like badges alongside text.'
|
|
347
|
+
},
|
|
348
|
+
source: {
|
|
349
|
+
transform: _transformers.transformStorySource
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
var WithReactElementLabelAndHelpText = {
|
|
355
|
+
render: function() {
|
|
356
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
357
|
+
gap: "md",
|
|
358
|
+
children: [
|
|
359
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
360
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
361
|
+
horizontal: true,
|
|
362
|
+
gap: "xs",
|
|
363
|
+
blockAlign: "center",
|
|
364
|
+
children: [
|
|
365
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
366
|
+
children: "Advanced Analytics"
|
|
367
|
+
}),
|
|
368
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
369
|
+
size: "small",
|
|
370
|
+
tone: "info",
|
|
371
|
+
children: "Pro"
|
|
372
|
+
})
|
|
373
|
+
]
|
|
374
|
+
}),
|
|
375
|
+
helpText: "Get detailed insights into your data with advanced visualization tools",
|
|
376
|
+
onChange: function(checked) {
|
|
377
|
+
return console.log('Advanced analytics:', checked);
|
|
378
|
+
}
|
|
379
|
+
}),
|
|
380
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
381
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
382
|
+
horizontal: true,
|
|
383
|
+
gap: "xs",
|
|
384
|
+
blockAlign: "center",
|
|
385
|
+
children: [
|
|
386
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
387
|
+
children: "API Access"
|
|
388
|
+
}),
|
|
389
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
390
|
+
size: "small",
|
|
391
|
+
tone: "attention",
|
|
392
|
+
children: "Beta"
|
|
393
|
+
})
|
|
394
|
+
]
|
|
395
|
+
}),
|
|
396
|
+
helpText: "Enable programmatic access to your account (currently in beta testing)",
|
|
397
|
+
checked: true,
|
|
398
|
+
onChange: function(checked) {
|
|
399
|
+
return console.log('API access:', checked);
|
|
400
|
+
}
|
|
401
|
+
}),
|
|
402
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
|
|
403
|
+
label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
|
|
404
|
+
horizontal: true,
|
|
405
|
+
gap: "xs",
|
|
406
|
+
blockAlign: "center",
|
|
407
|
+
children: [
|
|
408
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
409
|
+
children: "Priority Support"
|
|
410
|
+
}),
|
|
411
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
|
|
412
|
+
size: "small",
|
|
413
|
+
tone: "success",
|
|
414
|
+
children: "Enterprise"
|
|
415
|
+
})
|
|
416
|
+
]
|
|
417
|
+
}),
|
|
418
|
+
helpText: "Get 24/7 dedicated support from our enterprise team",
|
|
419
|
+
disabled: true,
|
|
420
|
+
onChange: function(checked) {
|
|
421
|
+
return console.log('Priority support:', checked);
|
|
422
|
+
}
|
|
423
|
+
})
|
|
424
|
+
]
|
|
425
|
+
});
|
|
426
|
+
},
|
|
427
|
+
parameters: {
|
|
428
|
+
docs: {
|
|
429
|
+
description: {
|
|
430
|
+
story: 'React element labels work seamlessly with help text, error states, and disabled states.'
|
|
431
|
+
},
|
|
432
|
+
source: {
|
|
433
|
+
transform: _transformers.transformStorySource
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tv } from "tailwind-variants";
|
|
3
|
+
import { isValidElement } from "react";
|
|
3
4
|
import Icon from "./Icon.js";
|
|
4
5
|
import Label from "./Label.js";
|
|
5
6
|
import Text from "./Text.js";
|
|
@@ -54,7 +55,7 @@ var checkboxStyles = tv({
|
|
|
54
55
|
* @component
|
|
55
56
|
*
|
|
56
57
|
* @param {Object} props - Props for the Checkbox component.
|
|
57
|
-
* @param {string} [props.label] - The
|
|
58
|
+
* @param {string|React.ReactNode} [props.label] - The label for the checkbox. Can be a string or a React element (e.g., text with a badge).
|
|
58
59
|
* @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
|
|
59
60
|
* @param {string} [props.id] - The unique identifier for the checkbox input.
|
|
60
61
|
* @param {string} [props.name] - The name attribute for the checkbox input.
|
|
@@ -73,6 +74,7 @@ var checkboxStyles = tv({
|
|
|
73
74
|
* @returns {JSX.Element} The rendered Checkbox component.
|
|
74
75
|
*
|
|
75
76
|
* @example
|
|
77
|
+
* // Basic usage with string label
|
|
76
78
|
* <Checkbox
|
|
77
79
|
* label="Accept Terms"
|
|
78
80
|
* id="accept-terms"
|
|
@@ -82,11 +84,20 @@ var checkboxStyles = tv({
|
|
|
82
84
|
* helpText="You must accept the terms to proceed."
|
|
83
85
|
* onChange={(e) => console.log('Checkbox changed:', e.target.checked)}
|
|
84
86
|
* />
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* // With React element label (e.g., text with badge)
|
|
90
|
+
* <Checkbox
|
|
91
|
+
* label={<Stack horizontal gap="xs" blockAlign="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
|
|
92
|
+
* checked={false}
|
|
93
|
+
* onChange={(checked) => console.log('Checkbox changed:', checked)}
|
|
94
|
+
* />
|
|
85
95
|
*/ function Checkbox() {
|
|
86
96
|
var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
87
97
|
var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, value = props.value, error = props.error, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_indeterminate = props.indeterminate, indeterminate = _props_indeterminate === void 0 ? false : _props_indeterminate, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, className = props.className;
|
|
88
98
|
var checked = !!_checked;
|
|
89
99
|
var hasError = !!error;
|
|
100
|
+
var labelIsReactElement = /*#__PURE__*/ isValidElement(label);
|
|
90
101
|
var classes = styles({
|
|
91
102
|
disabled: disabled
|
|
92
103
|
});
|
|
@@ -149,7 +160,7 @@ var checkboxStyles = tv({
|
|
|
149
160
|
label && !labelHidden && /*#__PURE__*/ _jsx(Label, {
|
|
150
161
|
tooltip: tooltip,
|
|
151
162
|
disabled: disabled,
|
|
152
|
-
as: "p",
|
|
163
|
+
as: labelIsReactElement ? "div" : "p",
|
|
153
164
|
children: label
|
|
154
165
|
})
|
|
155
166
|
]
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import Card from "../components/Card.js";
|
|
3
3
|
import Checkbox from "../components/Checkbox.js";
|
|
4
4
|
import Stack from "../components/Stack.js";
|
|
5
|
+
import Badge from "../components/Badge.js";
|
|
5
6
|
import { transformStorySource } from "../utilities/transformers.js";
|
|
6
7
|
export default {
|
|
7
8
|
title: 'Litho/Checkbox',
|
|
@@ -32,7 +33,7 @@ export default {
|
|
|
32
33
|
argTypes: {
|
|
33
34
|
label: {
|
|
34
35
|
control: 'text',
|
|
35
|
-
description: 'The
|
|
36
|
+
description: 'The label for the checkbox. Can be a string or a React element.'
|
|
36
37
|
},
|
|
37
38
|
checked: {
|
|
38
39
|
control: 'boolean',
|
|
@@ -217,3 +218,167 @@ export var MultipleCheckboxes = {
|
|
|
217
218
|
}
|
|
218
219
|
}
|
|
219
220
|
};
|
|
221
|
+
export var WithReactElementLabel = {
|
|
222
|
+
render: function() {
|
|
223
|
+
return /*#__PURE__*/ _jsxs(Stack, {
|
|
224
|
+
gap: "md",
|
|
225
|
+
children: [
|
|
226
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
227
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
228
|
+
horizontal: true,
|
|
229
|
+
gap: "xs",
|
|
230
|
+
blockAlign: "center",
|
|
231
|
+
children: [
|
|
232
|
+
/*#__PURE__*/ _jsx("span", {
|
|
233
|
+
children: "Premium Feature"
|
|
234
|
+
}),
|
|
235
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
236
|
+
size: "small",
|
|
237
|
+
tone: "success",
|
|
238
|
+
children: "Pro"
|
|
239
|
+
})
|
|
240
|
+
]
|
|
241
|
+
}),
|
|
242
|
+
onChange: function(checked) {
|
|
243
|
+
return console.log('Premium feature:', checked);
|
|
244
|
+
}
|
|
245
|
+
}),
|
|
246
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
247
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
248
|
+
horizontal: true,
|
|
249
|
+
gap: "xs",
|
|
250
|
+
blockAlign: "center",
|
|
251
|
+
children: [
|
|
252
|
+
/*#__PURE__*/ _jsx("span", {
|
|
253
|
+
children: "Beta Access"
|
|
254
|
+
}),
|
|
255
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
256
|
+
size: "small",
|
|
257
|
+
tone: "attention",
|
|
258
|
+
children: "Beta"
|
|
259
|
+
})
|
|
260
|
+
]
|
|
261
|
+
}),
|
|
262
|
+
checked: true,
|
|
263
|
+
onChange: function(checked) {
|
|
264
|
+
return console.log('Beta access:', checked);
|
|
265
|
+
}
|
|
266
|
+
}),
|
|
267
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
268
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
269
|
+
horizontal: true,
|
|
270
|
+
gap: "xs",
|
|
271
|
+
blockAlign: "center",
|
|
272
|
+
children: [
|
|
273
|
+
/*#__PURE__*/ _jsx("span", {
|
|
274
|
+
children: "Enterprise Only"
|
|
275
|
+
}),
|
|
276
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
277
|
+
size: "small",
|
|
278
|
+
tone: "info",
|
|
279
|
+
children: "Enterprise"
|
|
280
|
+
})
|
|
281
|
+
]
|
|
282
|
+
}),
|
|
283
|
+
onChange: function(checked) {
|
|
284
|
+
return console.log('Enterprise only:', checked);
|
|
285
|
+
}
|
|
286
|
+
})
|
|
287
|
+
]
|
|
288
|
+
});
|
|
289
|
+
},
|
|
290
|
+
parameters: {
|
|
291
|
+
docs: {
|
|
292
|
+
description: {
|
|
293
|
+
story: 'Checkbox labels can be React elements, allowing for rich content like badges alongside text.'
|
|
294
|
+
},
|
|
295
|
+
source: {
|
|
296
|
+
transform: transformStorySource
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
export var WithReactElementLabelAndHelpText = {
|
|
302
|
+
render: function() {
|
|
303
|
+
return /*#__PURE__*/ _jsxs(Stack, {
|
|
304
|
+
gap: "md",
|
|
305
|
+
children: [
|
|
306
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
307
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
308
|
+
horizontal: true,
|
|
309
|
+
gap: "xs",
|
|
310
|
+
blockAlign: "center",
|
|
311
|
+
children: [
|
|
312
|
+
/*#__PURE__*/ _jsx("span", {
|
|
313
|
+
children: "Advanced Analytics"
|
|
314
|
+
}),
|
|
315
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
316
|
+
size: "small",
|
|
317
|
+
tone: "info",
|
|
318
|
+
children: "Pro"
|
|
319
|
+
})
|
|
320
|
+
]
|
|
321
|
+
}),
|
|
322
|
+
helpText: "Get detailed insights into your data with advanced visualization tools",
|
|
323
|
+
onChange: function(checked) {
|
|
324
|
+
return console.log('Advanced analytics:', checked);
|
|
325
|
+
}
|
|
326
|
+
}),
|
|
327
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
328
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
329
|
+
horizontal: true,
|
|
330
|
+
gap: "xs",
|
|
331
|
+
blockAlign: "center",
|
|
332
|
+
children: [
|
|
333
|
+
/*#__PURE__*/ _jsx("span", {
|
|
334
|
+
children: "API Access"
|
|
335
|
+
}),
|
|
336
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
337
|
+
size: "small",
|
|
338
|
+
tone: "attention",
|
|
339
|
+
children: "Beta"
|
|
340
|
+
})
|
|
341
|
+
]
|
|
342
|
+
}),
|
|
343
|
+
helpText: "Enable programmatic access to your account (currently in beta testing)",
|
|
344
|
+
checked: true,
|
|
345
|
+
onChange: function(checked) {
|
|
346
|
+
return console.log('API access:', checked);
|
|
347
|
+
}
|
|
348
|
+
}),
|
|
349
|
+
/*#__PURE__*/ _jsx(Checkbox, {
|
|
350
|
+
label: /*#__PURE__*/ _jsxs(Stack, {
|
|
351
|
+
horizontal: true,
|
|
352
|
+
gap: "xs",
|
|
353
|
+
blockAlign: "center",
|
|
354
|
+
children: [
|
|
355
|
+
/*#__PURE__*/ _jsx("span", {
|
|
356
|
+
children: "Priority Support"
|
|
357
|
+
}),
|
|
358
|
+
/*#__PURE__*/ _jsx(Badge, {
|
|
359
|
+
size: "small",
|
|
360
|
+
tone: "success",
|
|
361
|
+
children: "Enterprise"
|
|
362
|
+
})
|
|
363
|
+
]
|
|
364
|
+
}),
|
|
365
|
+
helpText: "Get 24/7 dedicated support from our enterprise team",
|
|
366
|
+
disabled: true,
|
|
367
|
+
onChange: function(checked) {
|
|
368
|
+
return console.log('Priority support:', checked);
|
|
369
|
+
}
|
|
370
|
+
})
|
|
371
|
+
]
|
|
372
|
+
});
|
|
373
|
+
},
|
|
374
|
+
parameters: {
|
|
375
|
+
docs: {
|
|
376
|
+
description: {
|
|
377
|
+
story: 'React element labels work seamlessly with help text, error states, and disabled states.'
|
|
378
|
+
},
|
|
379
|
+
source: {
|
|
380
|
+
transform: transformStorySource
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
};
|
|
@@ -7,7 +7,7 @@ export default Checkbox;
|
|
|
7
7
|
* @component
|
|
8
8
|
*
|
|
9
9
|
* @param {Object} props - Props for the Checkbox component.
|
|
10
|
-
* @param {string} [props.label] - The
|
|
10
|
+
* @param {string|React.ReactNode} [props.label] - The label for the checkbox. Can be a string or a React element (e.g., text with a badge).
|
|
11
11
|
* @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
|
|
12
12
|
* @param {string} [props.id] - The unique identifier for the checkbox input.
|
|
13
13
|
* @param {string} [props.name] - The name attribute for the checkbox input.
|
|
@@ -26,6 +26,7 @@ export default Checkbox;
|
|
|
26
26
|
* @returns {JSX.Element} The rendered Checkbox component.
|
|
27
27
|
*
|
|
28
28
|
* @example
|
|
29
|
+
* // Basic usage with string label
|
|
29
30
|
* <Checkbox
|
|
30
31
|
* label="Accept Terms"
|
|
31
32
|
* id="accept-terms"
|
|
@@ -35,9 +36,17 @@ export default Checkbox;
|
|
|
35
36
|
* helpText="You must accept the terms to proceed."
|
|
36
37
|
* onChange={(e) => console.log('Checkbox changed:', e.target.checked)}
|
|
37
38
|
* />
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* // With React element label (e.g., text with badge)
|
|
42
|
+
* <Checkbox
|
|
43
|
+
* label={<Stack horizontal gap="xs" blockAlign="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
|
|
44
|
+
* checked={false}
|
|
45
|
+
* onChange={(checked) => console.log('Checkbox changed:', checked)}
|
|
46
|
+
* />
|
|
38
47
|
*/
|
|
39
48
|
declare function Checkbox(props?: {
|
|
40
|
-
label?: string;
|
|
49
|
+
label?: string | React.ReactNode;
|
|
41
50
|
labelHidden?: boolean;
|
|
42
51
|
id?: string;
|
|
43
52
|
name?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../components/Checkbox.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../components/Checkbox.js"],"names":[],"mappings":";AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,kCAvCG;IAAuC,KAAK,GAApC,MAAM,GAAC,KAAK,CAAC,SAAS;IACN,WAAW,GAA3B,OAAO;IACQ,EAAE,GAAjB,MAAM;IACS,IAAI,GAAnB,MAAM;IACS,KAAK,GAApB,MAAM;IACS,KAAK,GAApB,MAAM;IACU,OAAO,GAAvB,OAAO;IACS,QAAQ,GAAxB,OAAO;IACQ,QAAQ,GAAvB,MAAM;IAC2D,OAAO,GAAxE,KAAK,CAAC,SAAS,GAAC,OAAO,WAAW,EAAE,oBAAoB;IACxC,aAAa,GAA7B,OAAO;IACQ,SAAS,GAAxB,MAAM;IACW,QAAQ;IACR,OAAO;IACP,MAAM;CAE/B,GAAU,GAAG,CAAC,OAAO,CAiIvB"}
|
package/package.json
CHANGED