@kaio-xyz/design-system 1.1.0 → 1.1.2
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/components/atoms/accordion/accordion-content/accordion-content.d.ts +6 -0
- package/dist/components/atoms/accordion/accordion-content/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion-item/accordion-item.d.ts +11 -0
- package/dist/components/atoms/accordion/accordion-item/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion-trigger/accordion-trigger.d.ts +6 -0
- package/dist/components/atoms/accordion/accordion-trigger/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion.d.ts +5 -0
- package/dist/components/atoms/accordion/accordion.stories.d.ts +8 -0
- package/dist/components/atoms/accordion/index.d.ts +13 -0
- package/dist/index.cjs.js +74 -40
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +73 -41
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AccordionContent } from "./accordion-content";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
icon?: SvgIcon;
|
|
4
|
+
value: string;
|
|
5
|
+
triggerClassName?: string;
|
|
6
|
+
dataTest?: string;
|
|
7
|
+
trigger: ReactNode;
|
|
8
|
+
hasChildrenPadding?: boolean;
|
|
9
|
+
} & {
|
|
10
|
+
children?: ReactNode | undefined;
|
|
11
|
+
} & import("react").RefAttributes<HTMLDivElement | null>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AccordionItem } from "./accordion-item";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AccordionTrigger } from "./accordion-trigger";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
type AccordionRootProps = ComponentProps<typeof RadixAccordion.Root>;
|
|
4
|
+
export declare const AccordionRoot: ({ children, ...rest }: AccordionRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
3
|
+
declare const meta: Meta<typeof RadixAccordion.Root>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithIcons: Story;
|
|
8
|
+
export declare const Multiple: Story;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const Accordion: {
|
|
2
|
+
Root: ({ children, ...rest }: (import("@radix-ui/react-accordion").AccordionSingleProps | import("@radix-ui/react-accordion").AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
Item: import("react").ForwardRefExoticComponent<{
|
|
4
|
+
icon?: SvgIcon;
|
|
5
|
+
value: string;
|
|
6
|
+
triggerClassName?: string;
|
|
7
|
+
dataTest?: string;
|
|
8
|
+
trigger: import("react").ReactNode;
|
|
9
|
+
hasChildrenPadding?: boolean;
|
|
10
|
+
} & {
|
|
11
|
+
children?: import("react").ReactNode | undefined;
|
|
12
|
+
} & import("react").RefAttributes<HTMLDivElement | null>>;
|
|
13
|
+
};
|
package/dist/index.cjs.js
CHANGED
|
@@ -5,6 +5,7 @@ var clsx = require('clsx');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var ReactSelect = require('react-select');
|
|
7
7
|
var reactHookForm = require('react-hook-form');
|
|
8
|
+
var RAccordion = require('@radix-ui/react-accordion');
|
|
8
9
|
|
|
9
10
|
function _interopNamespaceDefault(e) {
|
|
10
11
|
var n = Object.create(null);
|
|
@@ -24,6 +25,7 @@ function _interopNamespaceDefault(e) {
|
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
28
|
+
var RAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RAccordion);
|
|
27
29
|
|
|
28
30
|
/******************************************************************************
|
|
29
31
|
Copyright (c) Microsoft Corporation.
|
|
@@ -260,16 +262,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
|
|
|
260
262
|
})));
|
|
261
263
|
};
|
|
262
264
|
|
|
263
|
-
var style$
|
|
265
|
+
var style$k = {"root":"stack-module__root__AqSLk"};
|
|
264
266
|
|
|
265
267
|
var Stack = function (_a) {
|
|
266
268
|
var children = _a.children, _b = _a.space, space = _b === void 0 ? "s" : _b, className = _a.className, _c = _a.position, position = _c === void 0 ? "vertical" : _c, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, dataTest = _a.dataTest, dataAlignItems = _a.dataAlignItems, dataCapitalize = _a.dataCapitalize, dataMarginTop = _a.dataMarginTop, dataMarginBottom = _a.dataMarginBottom, dataMarginLeft = _a.dataMarginLeft, dataPaddingBottom = _a.dataPaddingBottom, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom"]);
|
|
267
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
269
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$k.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
|
|
268
270
|
};
|
|
269
271
|
|
|
270
272
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
271
273
|
|
|
272
|
-
var style$
|
|
274
|
+
var style$j = {"root":"badge-module__root__rXpaz"};
|
|
273
275
|
|
|
274
276
|
var BadgeStatuses = {
|
|
275
277
|
success: "success",
|
|
@@ -288,16 +290,16 @@ var Badge = function (_a) {
|
|
|
288
290
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
289
291
|
}
|
|
290
292
|
}, [status]);
|
|
291
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
293
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$j.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
|
|
292
294
|
};
|
|
293
295
|
|
|
294
|
-
var style$
|
|
296
|
+
var style$i = {"root":"button-module__root__CDCDX"};
|
|
295
297
|
|
|
296
|
-
var style$
|
|
298
|
+
var style$h = {"root":"spinned-icon-module__root__xchkj"};
|
|
297
299
|
|
|
298
300
|
var SpinnedIcon = function (_a) {
|
|
299
301
|
var _b = _a.size, size = _b === void 0 ? 22 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.icon, Icon = _e === void 0 ? SvgLoader : _e, rest = __rest(_a, ["size", "duration", "className", "icon"]);
|
|
300
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
302
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$h.root, className), style: {
|
|
301
303
|
width: size,
|
|
302
304
|
height: size,
|
|
303
305
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -311,19 +313,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
311
313
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
|
|
312
314
|
var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
313
315
|
var iconChild = loadingIcon || baseIcon || null;
|
|
314
|
-
var classes = clsx(style$
|
|
316
|
+
var classes = clsx(style$i.root, props.className);
|
|
315
317
|
return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
|
|
316
318
|
});
|
|
317
319
|
Button.displayName = "Button";
|
|
318
320
|
|
|
319
|
-
var style$
|
|
321
|
+
var style$g = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
320
322
|
|
|
321
323
|
var Hint = function (_a) {
|
|
322
324
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
323
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
325
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$g.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$g.children, children: children })] })));
|
|
324
326
|
};
|
|
325
327
|
|
|
326
|
-
var style$
|
|
328
|
+
var style$f = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
|
|
327
329
|
|
|
328
330
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
329
331
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
|
|
@@ -360,28 +362,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
360
362
|
setHasValue(e.target.value.length > 0);
|
|
361
363
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
362
364
|
};
|
|
363
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
365
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$f.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$f.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$f.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$f.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$f.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$f.hint, children: hint })] }) }));
|
|
364
366
|
});
|
|
365
367
|
TextField.displayName = "TextField";
|
|
366
368
|
|
|
367
|
-
var style$
|
|
369
|
+
var style$e = {"container":"container-module__container__CAxQw"};
|
|
368
370
|
|
|
369
371
|
var Container = function (_a) {
|
|
370
372
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
371
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
373
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$e.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
372
374
|
};
|
|
373
375
|
|
|
374
|
-
var style$
|
|
376
|
+
var style$d = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
375
377
|
|
|
376
378
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
377
379
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
378
380
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
379
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
380
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
381
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$d.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
382
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$d.field })));
|
|
381
383
|
});
|
|
382
384
|
PasswordField.displayName = "PasswordField";
|
|
383
385
|
|
|
384
|
-
var style$
|
|
386
|
+
var style$c = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
385
387
|
|
|
386
388
|
var rules = {
|
|
387
389
|
length: /^.{8,}$/,
|
|
@@ -406,19 +408,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
406
408
|
React.useEffect(function () {
|
|
407
409
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
408
410
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
409
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
411
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$c.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
410
412
|
return (jsxRuntime.jsxs(Stack, { space: "m", children: [jsxRuntime.jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxRuntime.jsxs(Stack, { children: [getValidator(isLenghtCheckOk, "At least 8 characters"), getValidator(isCaseCheckOk, "Include uppercase & lowercase letters"), getValidator(isNumberCheckOk, "Include at least one number"), getValidator(isSpecialCheckOk, "Include at least one special character (allowed: @ $ ! % * ? & _ #)")] })] }));
|
|
411
413
|
});
|
|
412
414
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
413
415
|
|
|
414
|
-
var style$
|
|
416
|
+
var style$b = {"root":"label-module__root__34bJr"};
|
|
415
417
|
|
|
416
418
|
var Label = function (_a) {
|
|
417
419
|
var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
|
|
418
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
420
|
+
return (jsxRuntime.jsx("label", { className: clsx(style$b.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
419
421
|
};
|
|
420
422
|
|
|
421
|
-
var style$
|
|
423
|
+
var style$a = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
422
424
|
|
|
423
425
|
var IconAndLabel = function (_a) {
|
|
424
426
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -439,7 +441,7 @@ var CustomSingleValue = function (_a) {
|
|
|
439
441
|
};
|
|
440
442
|
var Select = function (_a) {
|
|
441
443
|
var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
|
|
442
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
444
|
+
return (jsxRuntime.jsxs("div", { className: clsx(style$a.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$a.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$a.selector, "data-error": !!error, children: [jsxRuntime.jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$a.hint, children: error })] })] }));
|
|
443
445
|
};
|
|
444
446
|
Select.displayName = "Select";
|
|
445
447
|
|
|
@@ -452,14 +454,14 @@ var FormSelect = function (_a) {
|
|
|
452
454
|
};
|
|
453
455
|
FormSelect.displayName = "FormSelect";
|
|
454
456
|
|
|
455
|
-
var style$
|
|
457
|
+
var style$9 = {"root":"loader-module__root__qnInQ"};
|
|
456
458
|
|
|
457
459
|
var Loader = function (_a) {
|
|
458
460
|
var text = _a.text, _b = _a.fullPage, fullPage = _b === void 0 ? true : _b, _c = _a.isLightOverlay, isLightOverlay = _c === void 0 ? false : _c, children = _a.children;
|
|
459
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
461
|
+
return (jsxRuntime.jsx("div", { className: style$9.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
460
462
|
};
|
|
461
463
|
|
|
462
|
-
var style$
|
|
464
|
+
var style$8 = {"root":"checkbox-module__root__W52jD","customCheckbox":"checkbox-module__customCheckbox__LACTE","label":"checkbox-module__label__ujd0G","frame":"checkbox-module__frame__njRTK","icon":"checkbox-module__icon__7kQzK"};
|
|
463
465
|
|
|
464
466
|
var Checkbox = function (_a) {
|
|
465
467
|
var className = _a.className, disabled = _a.disabled, id = _a.id, label = _a.label, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? "center" : _b, onChange = _a.onChange, dataTest = _a.dataTest, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e, checked = _a.checked, attributes = __rest(_a, ["className", "disabled", "id", "label", "verticalAlign", "onChange", "dataTest", "size", "variant", "indeterminate", "checked"]);
|
|
@@ -472,11 +474,11 @@ var Checkbox = function (_a) {
|
|
|
472
474
|
var dynamicStyle = {
|
|
473
475
|
"--vAlign": verticalAlign,
|
|
474
476
|
};
|
|
475
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
477
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$8.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$8.frame, children: [jsxRuntime.jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxRuntime.jsxs("span", { className: style$8.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$8.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$8.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$8.label, children: label })] }));
|
|
476
478
|
};
|
|
477
479
|
Checkbox.displayName = "Checkbox";
|
|
478
480
|
|
|
479
|
-
var style$
|
|
481
|
+
var style$7 = {"root":"clipboard-module__root__wVZhy"};
|
|
480
482
|
|
|
481
483
|
var trimString = function (str, noOfChars) {
|
|
482
484
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -501,44 +503,76 @@ var Clipboard = function (_a) {
|
|
|
501
503
|
}, [value]);
|
|
502
504
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
503
505
|
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
|
|
504
|
-
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
506
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$7.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
|
|
505
507
|
};
|
|
506
508
|
|
|
507
|
-
var style$
|
|
509
|
+
var style$6 = {"root":"stepper-module__root__hgDss"};
|
|
508
510
|
|
|
509
511
|
var Stepper = function (_a) {
|
|
510
512
|
var children = _a.children;
|
|
511
|
-
return (jsxRuntime.jsx("ul", { className: style$
|
|
513
|
+
return (jsxRuntime.jsx("ul", { className: style$6.root, children: children }));
|
|
512
514
|
};
|
|
513
515
|
|
|
514
|
-
var style$
|
|
516
|
+
var style$5 = {"root":"step-module__root__Tk1Yq","container":"step-module__container__XbQSB","label":"step-module__label__UNF3I","emptyIcon":"step-module__emptyIcon__-xNcB","checkIcon":"step-module__checkIcon__MWBUM","loadingIcon":"step-module__loadingIcon__-VoCZ"};
|
|
515
517
|
|
|
516
518
|
var Step = function (_a) {
|
|
517
519
|
var key = _a.key, label = _a.label, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
|
|
518
520
|
var icon = React.useMemo(function () {
|
|
519
521
|
switch (true) {
|
|
520
|
-
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$
|
|
521
|
-
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
522
|
-
default: return jsxRuntime.jsx("span", { className: style$
|
|
522
|
+
case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$5.checkIcon });
|
|
523
|
+
case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$5.loadingIcon });
|
|
524
|
+
default: return jsxRuntime.jsx("span", { className: style$5.emptyIcon });
|
|
523
525
|
}
|
|
524
526
|
}, [isCompleted, isCurrent]);
|
|
525
|
-
return (jsxRuntime.jsx("li", { className: style$
|
|
527
|
+
return (jsxRuntime.jsx("li", { className: style$5.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$5.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$5.label, children: label })] }) }, key));
|
|
526
528
|
};
|
|
527
529
|
|
|
528
|
-
var style$
|
|
530
|
+
var style$4 = {"root":"list-module__root__OXx93"};
|
|
529
531
|
|
|
530
532
|
var List = function (_a) {
|
|
531
533
|
var label = _a.label, children = _a.children;
|
|
532
|
-
return (jsxRuntime.jsxs(Stack, { className: style$
|
|
534
|
+
return (jsxRuntime.jsxs(Stack, { className: style$4.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
|
|
533
535
|
};
|
|
534
536
|
|
|
535
|
-
var style = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
537
|
+
var style$3 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
536
538
|
|
|
537
539
|
var ListItem = function (_a) {
|
|
538
540
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
539
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style.label, children: label }), jsxRuntime.jsx("span", { className: style.value, children: value })] }) }, key));
|
|
541
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$3.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$3.label, children: label }), jsxRuntime.jsx("span", { className: style$3.value, children: value })] }) }, key));
|
|
540
542
|
};
|
|
541
543
|
|
|
544
|
+
var AccordionRoot = function (_a) {
|
|
545
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
546
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
547
|
+
};
|
|
548
|
+
|
|
549
|
+
var style$2 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
550
|
+
|
|
551
|
+
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
552
|
+
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
553
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$2.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$2.childrenContainer, children: jsxRuntime.jsx("div", { className: style$2.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
554
|
+
});
|
|
555
|
+
AccordionContent.displayName = "AccordionContent";
|
|
556
|
+
|
|
557
|
+
var style$1 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
558
|
+
|
|
559
|
+
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
560
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
561
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$1.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$1.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
562
|
+
});
|
|
563
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
564
|
+
|
|
565
|
+
var style = {"root":"accordion-item-module__root__1Yk4f"};
|
|
566
|
+
|
|
567
|
+
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
568
|
+
var value = _a.value, trigger = _a.trigger, triggerClassName = _a.triggerClassName, children = _a.children, dataTest = _a.dataTest, _b = _a.hasChildrenPadding, hasChildrenPadding = _b === void 0 ? true : _b;
|
|
569
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
570
|
+
});
|
|
571
|
+
AccordionItem.displayName = "AccordionItem";
|
|
572
|
+
|
|
573
|
+
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
574
|
+
|
|
575
|
+
exports.Accordion = Accordion;
|
|
542
576
|
exports.Badge = Badge;
|
|
543
577
|
exports.Button = Button;
|
|
544
578
|
exports.Checkbox = Checkbox;
|