@preply/ds-web-lib 3.5.1 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BubbleCounter.module-QMwXWFIS.js +16 -0
- package/dist/ChipsPrimitive-DN5NA2yH.js +1242 -0
- package/dist/assets/Accordion.css +2 -2
- package/dist/assets/AlertDialog.css +2 -2
- package/dist/assets/Avatar.css +3 -3
- package/dist/assets/AvatarWithStatus.css +2 -2
- package/dist/assets/Badge.css +3 -3
- package/dist/assets/Box.css +3 -3
- package/dist/assets/BubbleCounter.css +69 -0
- package/dist/assets/Button.css +4 -4
- package/dist/assets/ButtonBase.css +4 -4
- package/dist/assets/Checkbox.css +2 -2
- package/dist/assets/Chips.css +16 -16
- package/dist/assets/ChipsPrimitive.css +118 -0
- package/dist/assets/CountryFlag.css +1 -1
- package/dist/assets/Dialog.css +3 -3
- package/dist/assets/Divider.css +14 -0
- package/dist/assets/FieldButton.css +3 -3
- package/dist/assets/FormControl.css +2 -2
- package/dist/assets/Heading.css +3 -3
- package/dist/assets/Icon.css +3 -3
- package/dist/assets/InputContainer.css +2 -2
- package/dist/assets/LayoutFlex.css +1 -1
- package/dist/assets/LayoutFlexItem.css +1 -1
- package/dist/assets/Link.css +3 -3
- package/dist/assets/Loader.css +1 -1
- package/dist/assets/OnboardingTooltip.css +1 -1
- package/dist/assets/OnboardingTour.css +1 -1
- package/dist/assets/PreplyLogo.css +1 -1
- package/dist/assets/ProgressBar.css +1 -1
- package/dist/assets/ProgressSteps.css +1 -1
- package/dist/assets/Slider.css +1 -1
- package/dist/assets/Spinner.css +3 -3
- package/dist/assets/Steps.css +1 -1
- package/dist/assets/Switch.css +57 -0
- package/dist/assets/Text.css +3 -3
- package/dist/assets/TextHighlighted.css +3 -3
- package/dist/assets/TextInline.css +3 -3
- package/dist/assets/Toast.css +2 -2
- package/dist/assets/Tooltip.css +1 -1
- package/dist/assets/VisuallyHidden.css +9 -0
- package/dist/assets/align-self.css +1 -1
- package/dist/assets/color.css +2 -2
- package/dist/assets/exp-color.css +2 -2
- package/dist/assets/layout-gap.css +21 -3
- package/dist/assets/layout-grid.css +3 -3
- package/dist/assets/layout-hide.css +1 -1
- package/dist/assets/layout-padding.css +75 -3
- package/dist/assets/layout-relative.css +1 -1
- package/dist/assets/text-accent.css +2 -2
- package/dist/assets/text-centered.css +1 -1
- package/dist/assets/text-weight.css +2 -2
- package/dist/components/BubbleCounter/BubbleCounter.d.ts +41 -0
- package/dist/components/BubbleCounter/BubbleCounter.d.ts.map +1 -0
- package/dist/components/BubbleCounter/BubbleCounter.js +31 -0
- package/dist/components/Chips/Chips.types.d.ts +38 -0
- package/dist/components/Chips/Chips.types.d.ts.map +1 -0
- package/dist/components/Chips/DismissibleChips.d.ts +48 -0
- package/dist/components/Chips/DismissibleChips.d.ts.map +1 -0
- package/dist/components/Chips/DismissibleChips.js +92 -0
- package/dist/components/Chips/MultiSelectChips.d.ts +45 -0
- package/dist/components/Chips/MultiSelectChips.d.ts.map +1 -0
- package/dist/components/Chips/MultiSelectChips.js +70 -0
- package/dist/components/Chips/SingleSelectChips.d.ts +45 -0
- package/dist/components/Chips/SingleSelectChips.d.ts.map +1 -0
- package/dist/components/Chips/SingleSelectChips.js +63 -0
- package/dist/components/Chips/private/ChipsPrimitive.d.ts +58 -0
- package/dist/components/Chips/private/ChipsPrimitive.d.ts.map +1 -0
- package/dist/components/Chips/private/ChipsPrimitive.js +17 -0
- package/dist/components/CountryFlag/CountryFlag.d.ts +3 -4
- package/dist/components/CountryFlag/CountryFlag.d.ts.map +1 -1
- package/dist/components/CountryFlag/CountryFlag.js +6 -6
- package/dist/components/Divider/Divider.d.ts +9 -0
- package/dist/components/Divider/Divider.d.ts.map +1 -0
- package/dist/components/Divider/Divider.js +14 -0
- package/dist/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.js +2 -1
- package/dist/components/LayoutFlex/LayoutFlex.js +1 -1
- package/dist/components/LayoutFlex/tests/Gap.d.ts +1 -0
- package/dist/components/LayoutFlex/tests/Gap.d.ts.map +1 -1
- package/dist/components/LayoutFlex/tests/Gap.js +12 -0
- package/dist/components/LayoutFlex/tests/Padding.d.ts +1 -0
- package/dist/components/LayoutFlex/tests/Padding.d.ts.map +1 -1
- package/dist/components/LayoutFlex/tests/Padding.js +12 -0
- package/dist/components/Switch/Switch.d.ts +62 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -0
- package/dist/components/Switch/Switch.js +51 -0
- package/dist/components/{Chips → deprecated/Chips}/Chips.d.ts +9 -1
- package/dist/components/deprecated/Chips/Chips.d.ts.map +1 -0
- package/dist/components/{Chips → deprecated/Chips}/Chips.js +7 -7
- package/dist/components/deprecated/index.d.ts +2 -0
- package/dist/components/deprecated/index.d.ts.map +1 -0
- package/dist/components/deprecated/index.js +4 -0
- package/dist/components/index.d.ts +6 -2
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +15 -2
- package/dist/components/private/VisuallyHidden/VisuallyHidden.d.ts +23 -0
- package/dist/components/private/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
- package/dist/components/private/VisuallyHidden/VisuallyHidden.js +15 -0
- package/dist/index.js +15 -2
- package/dist/{layout-gap.module-B_tyw31T.js → layout-gap.module-RzGBJL6B.js} +6 -0
- package/dist/shared-styles/layout-gap/layout-gap.js +1 -1
- package/dist/shared-styles/layout-padding/layout-padding.js +24 -0
- package/dist/utils/Orientation/OrientationProvider.d.ts +45 -0
- package/dist/utils/Orientation/OrientationProvider.d.ts.map +1 -0
- package/dist/utils/Orientation/OrientationProvider.js +27 -0
- package/dist/utils/Orientation/index.d.ts +2 -0
- package/dist/utils/Orientation/index.d.ts.map +1 -0
- package/dist/utils/Orientation/index.js +5 -0
- package/dist/utils/RovingTabIndex/RovingTabIndexProvider.d.ts +45 -0
- package/dist/utils/RovingTabIndex/RovingTabIndexProvider.d.ts.map +1 -0
- package/dist/utils/RovingTabIndex/RovingTabIndexProvider.js +48 -0
- package/dist/utils/RovingTabIndex/index.d.ts +2 -0
- package/dist/utils/RovingTabIndex/index.d.ts.map +1 -0
- package/dist/utils/RovingTabIndex/index.js +5 -0
- package/dist/utils/createRequiredContext.d.ts +15 -0
- package/dist/utils/createRequiredContext.d.ts.map +1 -0
- package/dist/utils/createRequiredContext.js +16 -0
- package/dist/utils/useControllableState/useControllableState.d.ts +19 -0
- package/dist/utils/useControllableState/useControllableState.d.ts.map +1 -0
- package/dist/utils/useControllableState/useControllableState.js +27 -0
- package/dist/utils/useStableCallback/useStableCallback.d.ts +18 -0
- package/dist/utils/useStableCallback/useStableCallback.d.ts.map +1 -0
- package/dist/utils/useStableCallback/useStableCallback.js +15 -0
- package/package.json +14 -13
- package/dist/components/Chips/Chips.d.ts.map +0 -1
- package/dist/components/CountryFlag/types.d.ts +0 -3
- package/dist/components/CountryFlag/types.d.ts.map +0 -1
- package/dist/components/CountryFlag/utils/countries.d.ts +0 -276
- package/dist/components/CountryFlag/utils/countries.d.ts.map +0 -1
- package/dist/components/CountryFlag/utils/countries.js +0 -275
- package/dist/components/CountryFlag/utils/getCountryFlagUrl.d.ts +0 -7
- package/dist/components/CountryFlag/utils/getCountryFlagUrl.d.ts.map +0 -1
- package/dist/components/CountryFlag/utils/getCountryFlagUrl.js +0 -14
- /package/dist/components/{CountryFlag/types.js → Chips/Chips.types.js} +0 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Dataset } from '@preply/ds-core';
|
|
3
|
+
export type SwitchProps = {
|
|
4
|
+
/**
|
|
5
|
+
* The state of the switch.
|
|
6
|
+
* Use this for a controlled switch.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* const [checked, setChecked] = useState(initialChecked);
|
|
10
|
+
* <Switch
|
|
11
|
+
* checked={checked}
|
|
12
|
+
* onCheckedChange={setChecked}
|
|
13
|
+
* />
|
|
14
|
+
*/
|
|
15
|
+
checked?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* The default state of the switch.
|
|
18
|
+
* Use for an uncontrolled switch.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* <Switch
|
|
22
|
+
* defaultChecked={mySetting}
|
|
23
|
+
* onCheckedChange={updateMySetting}
|
|
24
|
+
* />
|
|
25
|
+
*/
|
|
26
|
+
defaultChecked?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Callback for when the switch state changes.
|
|
29
|
+
*/
|
|
30
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
31
|
+
/**
|
|
32
|
+
* The unique identifier for the switch element.
|
|
33
|
+
*/
|
|
34
|
+
id?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Disables interactions with the switch.
|
|
37
|
+
*/
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Accessible label for the switch.
|
|
41
|
+
*/
|
|
42
|
+
'aria-label'?: string;
|
|
43
|
+
/**
|
|
44
|
+
* ID of the element that labels the switch.
|
|
45
|
+
*/
|
|
46
|
+
'aria-labelledby'?: string;
|
|
47
|
+
/**
|
|
48
|
+
* ID of the element that describes the switch.
|
|
49
|
+
*/
|
|
50
|
+
'aria-describedby'?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Indicates whether the switch value is invalid.
|
|
53
|
+
*/
|
|
54
|
+
'aria-invalid'?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* ID of the element that describes the error, if any.
|
|
57
|
+
*/
|
|
58
|
+
'aria-errormessage'?: string;
|
|
59
|
+
dataset?: Dataset;
|
|
60
|
+
};
|
|
61
|
+
export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
62
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAK1C,MAAM,MAAM,WAAW,GAAG;IACtB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmBF,eAAO,MAAM,MAAM,uFA6BjB,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef, useState } from "react";
|
|
4
|
+
import { getDatasetProps } from "@preply/ds-web-core";
|
|
5
|
+
import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
|
|
6
|
+
import '../../assets/Switch.css';const Switch$1 = "Switch__-4XFt";
|
|
7
|
+
const thumb = "thumb__qAYMq";
|
|
8
|
+
const styles = {
|
|
9
|
+
Switch: Switch$1,
|
|
10
|
+
thumb
|
|
11
|
+
};
|
|
12
|
+
function filterSwitchProps(props) {
|
|
13
|
+
const filteredProps = {};
|
|
14
|
+
Object.entries(props).forEach(([key, value]) => {
|
|
15
|
+
switch (key) {
|
|
16
|
+
case "id":
|
|
17
|
+
case "disabled":
|
|
18
|
+
case "aria-label":
|
|
19
|
+
case "aria-labelledby":
|
|
20
|
+
case "aria-describedby":
|
|
21
|
+
case "aria-invalid":
|
|
22
|
+
case "aria-errormessage":
|
|
23
|
+
filteredProps[key] = value;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
return filteredProps;
|
|
27
|
+
}
|
|
28
|
+
const Switch = forwardRef(function Switch2({
|
|
29
|
+
checked: forceChecked,
|
|
30
|
+
defaultChecked,
|
|
31
|
+
onCheckedChange,
|
|
32
|
+
dataset,
|
|
33
|
+
...otherProps
|
|
34
|
+
}, ref) {
|
|
35
|
+
const [internalChecked, setInternalChecked] = useState(defaultChecked != null ? defaultChecked : false);
|
|
36
|
+
const isControlled = forceChecked !== void 0;
|
|
37
|
+
const checked = isControlled ? forceChecked : internalChecked;
|
|
38
|
+
const handleClick = () => {
|
|
39
|
+
const newValue = !checked;
|
|
40
|
+
if (!isControlled) {
|
|
41
|
+
setInternalChecked(newValue);
|
|
42
|
+
}
|
|
43
|
+
onCheckedChange == null ? void 0 : onCheckedChange(newValue);
|
|
44
|
+
};
|
|
45
|
+
return /* @__PURE__ */ jsx("button", { ...filterSwitchProps(otherProps), ...getDatasetProps(dataset, {
|
|
46
|
+
preplyDsComponent: webComponentNames.Switch
|
|
47
|
+
}), ref, role: "switch", "aria-checked": checked, className: styles.Switch, onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: styles.thumb }) });
|
|
48
|
+
});
|
|
49
|
+
export {
|
|
50
|
+
Switch
|
|
51
|
+
};
|
|
@@ -30,7 +30,10 @@ export type ChipsProps = {
|
|
|
30
30
|
};
|
|
31
31
|
type ChipsSubcomponents = {
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
33
|
+
* @deprecated Use `SingleSelectChipsItem`, `MultiSelectChipsItem`, or `DismissibleChipsItem` instead.
|
|
34
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-singleselectchips--docs SingleSelectChips}
|
|
35
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-multiselectchips--docs MultiSelectChips}
|
|
36
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-dismissiblechips--docs DismissibleChips}
|
|
34
37
|
*/
|
|
35
38
|
Item: ForwardRefExoticComponent<ChipsItemProps & RefAttributes<HTMLLIElement>>;
|
|
36
39
|
};
|
|
@@ -38,6 +41,11 @@ type ChipsSubcomponents = {
|
|
|
38
41
|
* A Chips container.
|
|
39
42
|
*
|
|
40
43
|
* Add `Chips.Item` children to render a list of Chips.
|
|
44
|
+
*
|
|
45
|
+
* @deprecated Use `SingleSelectChips`, `MultiSelectChips`, or `DismissibleChips` instead.
|
|
46
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-singleselectchips--docs SingleSelectChips}
|
|
47
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-multiselectchips--docs MultiSelectChips}
|
|
48
|
+
* @see {@link https://ds.preply.org/latest/?path=/docs/components-chips-dismissiblechips--docs DismissibleChips}
|
|
41
49
|
*/
|
|
42
50
|
export declare const Chips: FC<ChipsProps> & ChipsSubcomponents;
|
|
43
51
|
export type ChipsItemProps = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../../src/components/deprecated/Chips/Chips.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAmB,MAAM,qBAAqB,CAAC;AAC7E,OAAc,EAAE,EAAE,EAAc,yBAAyB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUnG,MAAM,MAAM,UAAU,GAAG;IACrB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACtB;;;;;OAKG;IACH,IAAI,EAAE,yBAAyB,CAAC,cAAc,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;CAClF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,kBAgBpC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
|
|
@@ -4,17 +4,17 @@ import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-n
|
|
|
4
4
|
import { getDatasetProps } from "@preply/ds-web-core";
|
|
5
5
|
import * as o from "react";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
import { Icon } from "
|
|
8
|
-
import { filterAttributesPassedByRadixUIAtRuntime } from "
|
|
7
|
+
import { Icon } from "../../Icon/Icon.js";
|
|
8
|
+
import { filterAttributesPassedByRadixUIAtRuntime } from "../../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
|
|
9
9
|
import { useIntl } from "react-intl";
|
|
10
|
-
import { genericAriaLabels } from "
|
|
11
|
-
import '
|
|
12
|
-
const chip = "
|
|
10
|
+
import { genericAriaLabels } from "../../../utils/shared-strings.js";
|
|
11
|
+
import '../../../assets/Chips.css';const chips = "chips__0cCVU";
|
|
12
|
+
const chip = "chip__t4Yxh";
|
|
13
13
|
const styles = {
|
|
14
14
|
chips,
|
|
15
15
|
chip,
|
|
16
|
-
"chip-toggle": "chip-
|
|
17
|
-
"chip-remove": "chip-
|
|
16
|
+
"chip-toggle": "chip-toggle__Q6Xqq",
|
|
17
|
+
"chip-remove": "chip-remove__uHsIL"
|
|
18
18
|
};
|
|
19
19
|
const SvgClose = ({
|
|
20
20
|
title,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/deprecated/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -4,14 +4,17 @@ export { Avatar } from './Avatar/Avatar';
|
|
|
4
4
|
export { AvatarWithStatus } from './AvatarWithStatus/AvatarWithStatus';
|
|
5
5
|
export { Badge } from './Badge/Badge';
|
|
6
6
|
export { Box } from './Box/Box';
|
|
7
|
+
export { BubbleCounter, type BubbleCounterProps } from './BubbleCounter/BubbleCounter';
|
|
7
8
|
export { Button } from './Button/Button';
|
|
8
|
-
export { Chips } from './Chips/Chips';
|
|
9
9
|
export { Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
|
|
10
|
+
export { SingleSelectChips, type SingleSelectChipsProps, SingleSelectChipsItem, type SingleSelectChipsItemProps, } from './Chips/SingleSelectChips';
|
|
11
|
+
export { MultiSelectChips, type MultiSelectChipsProps, MultiSelectChipsItem, type MultiSelectChipsItemProps, } from './Chips/MultiSelectChips';
|
|
12
|
+
export { DismissibleChips, type DismissibleChipsProps, DismissibleChipsItem, type DismissibleChipsItemProps, } from './Chips/DismissibleChips';
|
|
10
13
|
export { createOnboardingTour } from './OnboardingTour/OnboardingTour';
|
|
11
14
|
export { Dialog } from './Dialog/Dialog';
|
|
15
|
+
export { Divider, type DividerProps } from './Divider/Divider';
|
|
12
16
|
export { FieldButton, type FieldButtonProps } from './FieldButton/FieldButton';
|
|
13
17
|
export { CountryFlag, type CountryFlagProps } from './CountryFlag/CountryFlag';
|
|
14
|
-
export { type CountryCode } from './CountryFlag/types';
|
|
15
18
|
export { FormControl, type FormControlProps } from './FormControl/FormControl';
|
|
16
19
|
export { Heading } from './Heading/Heading';
|
|
17
20
|
export { Icon } from './Icon/Icon';
|
|
@@ -34,6 +37,7 @@ export { ShowOnIntersection } from './ShowOnIntersection/ShowOnIntersection';
|
|
|
34
37
|
export { Slider, type SliderProps } from './Slider/Slider';
|
|
35
38
|
export { RangeSlider, type RangeSliderProps, type RangeSliderValue } from './Slider/RangeSlider';
|
|
36
39
|
export { Steps } from './Steps/Steps';
|
|
40
|
+
export { Switch, type SwitchProps } from './Switch/Switch';
|
|
37
41
|
export { Text } from './Text/Text';
|
|
38
42
|
export { TextareaField, type TextareaFieldProps } from './TextareaField/TextareaField';
|
|
39
43
|
export { TextField, type TextFieldProps } from './TextField/TextField';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC7B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -4,11 +4,15 @@ import { Avatar } from "./Avatar/Avatar.js";
|
|
|
4
4
|
import { AvatarWithStatus } from "./AvatarWithStatus/AvatarWithStatus.js";
|
|
5
5
|
import { Badge } from "./Badge/Badge.js";
|
|
6
6
|
import { Box } from "./Box/Box.js";
|
|
7
|
+
import { BubbleCounter } from "./BubbleCounter/BubbleCounter.js";
|
|
7
8
|
import { Button } from "./Button/Button.js";
|
|
8
|
-
import { Chips } from "./Chips/Chips.js";
|
|
9
9
|
import { Checkbox } from "./Checkbox/Checkbox.js";
|
|
10
|
+
import { SingleSelectChips, SingleSelectChipsItem } from "./Chips/SingleSelectChips.js";
|
|
11
|
+
import { MultiSelectChips, MultiSelectChipsItem } from "./Chips/MultiSelectChips.js";
|
|
12
|
+
import { DismissibleChips, DismissibleChipsItem } from "./Chips/DismissibleChips.js";
|
|
10
13
|
import { createOnboardingTour } from "./OnboardingTour/OnboardingTour.js";
|
|
11
14
|
import { Dialog } from "./Dialog/Dialog.js";
|
|
15
|
+
import { Divider } from "./Divider/Divider.js";
|
|
12
16
|
import { FieldButton } from "./FieldButton/FieldButton.js";
|
|
13
17
|
import { CountryFlag } from "./CountryFlag/CountryFlag.js";
|
|
14
18
|
import { FormControl } from "./FormControl/FormControl.js";
|
|
@@ -33,6 +37,7 @@ import { ShowOnIntersection } from "./ShowOnIntersection/ShowOnIntersection.js";
|
|
|
33
37
|
import { S } from "../Slider-BXzNSu7n.js";
|
|
34
38
|
import { RangeSlider } from "./Slider/RangeSlider.js";
|
|
35
39
|
import { Steps } from "./Steps/Steps.js";
|
|
40
|
+
import { Switch } from "./Switch/Switch.js";
|
|
36
41
|
import { Text } from "./Text/Text.js";
|
|
37
42
|
import { TextareaField } from "./TextareaField/TextareaField.js";
|
|
38
43
|
import { TextField } from "./TextField/TextField.js";
|
|
@@ -51,11 +56,14 @@ export {
|
|
|
51
56
|
AvatarWithStatus,
|
|
52
57
|
Badge,
|
|
53
58
|
Box,
|
|
59
|
+
BubbleCounter,
|
|
54
60
|
Button,
|
|
55
61
|
Checkbox,
|
|
56
|
-
Chips,
|
|
57
62
|
CountryFlag,
|
|
58
63
|
Dialog,
|
|
64
|
+
DismissibleChips,
|
|
65
|
+
DismissibleChipsItem,
|
|
66
|
+
Divider,
|
|
59
67
|
FieldButton,
|
|
60
68
|
FormControl,
|
|
61
69
|
Heading,
|
|
@@ -67,6 +75,8 @@ export {
|
|
|
67
75
|
LayoutGridItem,
|
|
68
76
|
Link,
|
|
69
77
|
Loader,
|
|
78
|
+
MultiSelectChips,
|
|
79
|
+
MultiSelectChipsItem,
|
|
70
80
|
NumberField,
|
|
71
81
|
ObserveIntersection,
|
|
72
82
|
OnboardingTooltip,
|
|
@@ -78,8 +88,11 @@ export {
|
|
|
78
88
|
SelectField,
|
|
79
89
|
SelectFieldOption,
|
|
80
90
|
ShowOnIntersection,
|
|
91
|
+
SingleSelectChips,
|
|
92
|
+
SingleSelectChipsItem,
|
|
81
93
|
S as Slider,
|
|
82
94
|
Steps,
|
|
95
|
+
Switch,
|
|
83
96
|
Text,
|
|
84
97
|
TextField,
|
|
85
98
|
TextHighlighted,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
type Props = {
|
|
3
|
+
as?: 'span' | 'div';
|
|
4
|
+
children: ReactNode | ReactNode[];
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* Visually hides content while keeping it accessible to screen readers.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* function RemoveButton({ children }) {
|
|
12
|
+
* return (
|
|
13
|
+
* <button type="button">
|
|
14
|
+
* <VisuallyHidden>Remove</VisuallyHidden>
|
|
15
|
+
* {children}
|
|
16
|
+
* </button>
|
|
17
|
+
* );
|
|
18
|
+
* }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function VisuallyHidden({ as, children }: Props): React.JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=VisuallyHidden.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../../src/components/private/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,KAAK,KAAK,GAAG;IACT,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACpB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,qBAI9D"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import '../../../assets/VisuallyHidden.css';const visuallyHidden = "visuallyHidden__u7xQ9";
|
|
3
|
+
const styles = {
|
|
4
|
+
visuallyHidden
|
|
5
|
+
};
|
|
6
|
+
function VisuallyHidden({
|
|
7
|
+
as = "span",
|
|
8
|
+
children
|
|
9
|
+
}) {
|
|
10
|
+
const Component = as != null ? as : "span";
|
|
11
|
+
return /* @__PURE__ */ jsx(Component, { className: styles.visuallyHidden, children });
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
VisuallyHidden
|
|
15
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -4,11 +4,15 @@ import { Avatar } from "./components/Avatar/Avatar.js";
|
|
|
4
4
|
import { AvatarWithStatus } from "./components/AvatarWithStatus/AvatarWithStatus.js";
|
|
5
5
|
import { Badge } from "./components/Badge/Badge.js";
|
|
6
6
|
import { Box } from "./components/Box/Box.js";
|
|
7
|
+
import { BubbleCounter } from "./components/BubbleCounter/BubbleCounter.js";
|
|
7
8
|
import { Button } from "./components/Button/Button.js";
|
|
8
|
-
import { Chips } from "./components/Chips/Chips.js";
|
|
9
9
|
import { Checkbox } from "./components/Checkbox/Checkbox.js";
|
|
10
|
+
import { SingleSelectChips, SingleSelectChipsItem } from "./components/Chips/SingleSelectChips.js";
|
|
11
|
+
import { MultiSelectChips, MultiSelectChipsItem } from "./components/Chips/MultiSelectChips.js";
|
|
12
|
+
import { DismissibleChips, DismissibleChipsItem } from "./components/Chips/DismissibleChips.js";
|
|
10
13
|
import { createOnboardingTour } from "./components/OnboardingTour/OnboardingTour.js";
|
|
11
14
|
import { Dialog } from "./components/Dialog/Dialog.js";
|
|
15
|
+
import { Divider } from "./components/Divider/Divider.js";
|
|
12
16
|
import { FieldButton } from "./components/FieldButton/FieldButton.js";
|
|
13
17
|
import { CountryFlag } from "./components/CountryFlag/CountryFlag.js";
|
|
14
18
|
import { FormControl } from "./components/FormControl/FormControl.js";
|
|
@@ -33,6 +37,7 @@ import { ShowOnIntersection } from "./components/ShowOnIntersection/ShowOnInters
|
|
|
33
37
|
import { S } from "./Slider-BXzNSu7n.js";
|
|
34
38
|
import { RangeSlider } from "./components/Slider/RangeSlider.js";
|
|
35
39
|
import { Steps } from "./components/Steps/Steps.js";
|
|
40
|
+
import { Switch } from "./components/Switch/Switch.js";
|
|
36
41
|
import { Text } from "./components/Text/Text.js";
|
|
37
42
|
import { TextareaField } from "./components/TextareaField/TextareaField.js";
|
|
38
43
|
import { TextField } from "./components/TextField/TextField.js";
|
|
@@ -51,11 +56,14 @@ export {
|
|
|
51
56
|
AvatarWithStatus,
|
|
52
57
|
Badge,
|
|
53
58
|
Box,
|
|
59
|
+
BubbleCounter,
|
|
54
60
|
Button,
|
|
55
61
|
Checkbox,
|
|
56
|
-
Chips,
|
|
57
62
|
CountryFlag,
|
|
58
63
|
Dialog,
|
|
64
|
+
DismissibleChips,
|
|
65
|
+
DismissibleChipsItem,
|
|
66
|
+
Divider,
|
|
59
67
|
FieldButton,
|
|
60
68
|
FormControl,
|
|
61
69
|
Heading,
|
|
@@ -67,6 +75,8 @@ export {
|
|
|
67
75
|
LayoutGridItem,
|
|
68
76
|
Link,
|
|
69
77
|
Loader,
|
|
78
|
+
MultiSelectChips,
|
|
79
|
+
MultiSelectChipsItem,
|
|
70
80
|
NumberField,
|
|
71
81
|
ObserveIntersection,
|
|
72
82
|
OnboardingTooltip,
|
|
@@ -78,8 +88,11 @@ export {
|
|
|
78
88
|
SelectField,
|
|
79
89
|
SelectFieldOption,
|
|
80
90
|
ShowOnIntersection,
|
|
91
|
+
SingleSelectChips,
|
|
92
|
+
SingleSelectChipsItem,
|
|
81
93
|
S as Slider,
|
|
82
94
|
Steps,
|
|
95
|
+
Switch,
|
|
83
96
|
Text,
|
|
84
97
|
TextField,
|
|
85
98
|
TextHighlighted,
|
|
@@ -13,6 +13,7 @@ const styles = {
|
|
|
13
13
|
"LayoutGap--gap-1": "LayoutGap--gap-1__lzjS-",
|
|
14
14
|
"LayoutGap--gap-2": "LayoutGap--gap-2__GmMb9",
|
|
15
15
|
"LayoutGap--gap-4": "LayoutGap--gap-4__Yogfa",
|
|
16
|
+
"LayoutGap--gap-6": "LayoutGap--gap-6__K72nD",
|
|
16
17
|
"LayoutGap--gap-8": "LayoutGap--gap-8__YbiOh",
|
|
17
18
|
"LayoutGap--gap-12": "LayoutGap--gap-12__G77kj",
|
|
18
19
|
"LayoutGap--gap-16": "LayoutGap--gap-16__GWQYe",
|
|
@@ -35,6 +36,7 @@ const styles = {
|
|
|
35
36
|
"LayoutGap--narrow-l--gap-1": "LayoutGap--narrow-l--gap-1__bjABx",
|
|
36
37
|
"LayoutGap--narrow-l--gap-2": "LayoutGap--narrow-l--gap-2__0MIx0",
|
|
37
38
|
"LayoutGap--narrow-l--gap-4": "LayoutGap--narrow-l--gap-4__aN3Fz",
|
|
39
|
+
"LayoutGap--narrow-l--gap-6": "LayoutGap--narrow-l--gap-6__w9e8z",
|
|
38
40
|
"LayoutGap--narrow-l--gap-8": "LayoutGap--narrow-l--gap-8__oIVC6",
|
|
39
41
|
"LayoutGap--narrow-l--gap-12": "LayoutGap--narrow-l--gap-12__3j3pM",
|
|
40
42
|
"LayoutGap--narrow-l--gap-16": "LayoutGap--narrow-l--gap-16__k6lsT",
|
|
@@ -57,6 +59,7 @@ const styles = {
|
|
|
57
59
|
"LayoutGap--medium-s--gap-1": "LayoutGap--medium-s--gap-1__BE-9I",
|
|
58
60
|
"LayoutGap--medium-s--gap-2": "LayoutGap--medium-s--gap-2__811IY",
|
|
59
61
|
"LayoutGap--medium-s--gap-4": "LayoutGap--medium-s--gap-4__ueZf3",
|
|
62
|
+
"LayoutGap--medium-s--gap-6": "LayoutGap--medium-s--gap-6__cHexS",
|
|
60
63
|
"LayoutGap--medium-s--gap-8": "LayoutGap--medium-s--gap-8__3iOSe",
|
|
61
64
|
"LayoutGap--medium-s--gap-12": "LayoutGap--medium-s--gap-12__by6oZ",
|
|
62
65
|
"LayoutGap--medium-s--gap-16": "LayoutGap--medium-s--gap-16__LhmQq",
|
|
@@ -79,6 +82,7 @@ const styles = {
|
|
|
79
82
|
"LayoutGap--medium-l--gap-1": "LayoutGap--medium-l--gap-1__dmHU4",
|
|
80
83
|
"LayoutGap--medium-l--gap-2": "LayoutGap--medium-l--gap-2__zKzFF",
|
|
81
84
|
"LayoutGap--medium-l--gap-4": "LayoutGap--medium-l--gap-4__BgGU5",
|
|
85
|
+
"LayoutGap--medium-l--gap-6": "LayoutGap--medium-l--gap-6__piNrc",
|
|
82
86
|
"LayoutGap--medium-l--gap-8": "LayoutGap--medium-l--gap-8__oDZhy",
|
|
83
87
|
"LayoutGap--medium-l--gap-12": "LayoutGap--medium-l--gap-12__NUwor",
|
|
84
88
|
"LayoutGap--medium-l--gap-16": "LayoutGap--medium-l--gap-16__kboKh",
|
|
@@ -101,6 +105,7 @@ const styles = {
|
|
|
101
105
|
"LayoutGap--wide-s--gap-1": "LayoutGap--wide-s--gap-1__9ymIy",
|
|
102
106
|
"LayoutGap--wide-s--gap-2": "LayoutGap--wide-s--gap-2__9e-Iu",
|
|
103
107
|
"LayoutGap--wide-s--gap-4": "LayoutGap--wide-s--gap-4__lmwS7",
|
|
108
|
+
"LayoutGap--wide-s--gap-6": "LayoutGap--wide-s--gap-6__Oopm2",
|
|
104
109
|
"LayoutGap--wide-s--gap-8": "LayoutGap--wide-s--gap-8__xWztG",
|
|
105
110
|
"LayoutGap--wide-s--gap-12": "LayoutGap--wide-s--gap-12__BwwvI",
|
|
106
111
|
"LayoutGap--wide-s--gap-16": "LayoutGap--wide-s--gap-16__ZNkDu",
|
|
@@ -123,6 +128,7 @@ const styles = {
|
|
|
123
128
|
"LayoutGap--wide-l--gap-1": "LayoutGap--wide-l--gap-1__5Mhg-",
|
|
124
129
|
"LayoutGap--wide-l--gap-2": "LayoutGap--wide-l--gap-2__WZ2Yc",
|
|
125
130
|
"LayoutGap--wide-l--gap-4": "LayoutGap--wide-l--gap-4__Zc72b",
|
|
131
|
+
"LayoutGap--wide-l--gap-6": "LayoutGap--wide-l--gap-6__jULd6",
|
|
126
132
|
"LayoutGap--wide-l--gap-8": "LayoutGap--wide-l--gap-8__esj-j",
|
|
127
133
|
"LayoutGap--wide-l--gap-12": "LayoutGap--wide-l--gap-12__lHx43",
|
|
128
134
|
"LayoutGap--wide-l--gap-16": "LayoutGap--wide-l--gap-16__uznWJ",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { moduleClassNames, stringClassNames } from "@preply/ds-web-core";
|
|
2
|
-
import { s as styles } from "../../layout-gap.module-
|
|
2
|
+
import { s as styles } from "../../layout-gap.module-RzGBJL6B.js";
|
|
3
3
|
const LAYOUT_GAP = "LayoutGap";
|
|
4
4
|
const getLayoutGapClassnames = (gap) => {
|
|
5
5
|
return moduleClassNames(styles, LAYOUT_GAP, [stringClassNames("gap", gap)]);
|
|
@@ -50,6 +50,10 @@ const styles = {
|
|
|
50
50
|
"LayoutPadding--padding-right-4": "LayoutPadding--padding-right-4__2gA-s",
|
|
51
51
|
"LayoutPadding--padding-bottom-4": "LayoutPadding--padding-bottom-4__W5IjC",
|
|
52
52
|
"LayoutPadding--padding-left-4": "LayoutPadding--padding-left-4__xkaFb",
|
|
53
|
+
"LayoutPadding--padding-top-6": "LayoutPadding--padding-top-6__f6-lM",
|
|
54
|
+
"LayoutPadding--padding-right-6": "LayoutPadding--padding-right-6__13Zzt",
|
|
55
|
+
"LayoutPadding--padding-bottom-6": "LayoutPadding--padding-bottom-6__f-md0",
|
|
56
|
+
"LayoutPadding--padding-left-6": "LayoutPadding--padding-left-6__kXjFo",
|
|
53
57
|
"LayoutPadding--padding-top-8": "LayoutPadding--padding-top-8__-VXK9",
|
|
54
58
|
"LayoutPadding--padding-right-8": "LayoutPadding--padding-right-8__Mue8u",
|
|
55
59
|
"LayoutPadding--padding-bottom-8": "LayoutPadding--padding-bottom-8__y9iTY",
|
|
@@ -138,6 +142,10 @@ const styles = {
|
|
|
138
142
|
"LayoutPadding--narrow-l--padding-right-4": "LayoutPadding--narrow-l--padding-right-4__Ozwsr",
|
|
139
143
|
"LayoutPadding--narrow-l--padding-bottom-4": "LayoutPadding--narrow-l--padding-bottom-4__4LuSx",
|
|
140
144
|
"LayoutPadding--narrow-l--padding-left-4": "LayoutPadding--narrow-l--padding-left-4__gPVHe",
|
|
145
|
+
"LayoutPadding--narrow-l--padding-top-6": "LayoutPadding--narrow-l--padding-top-6__TFmG-",
|
|
146
|
+
"LayoutPadding--narrow-l--padding-right-6": "LayoutPadding--narrow-l--padding-right-6__4gNEl",
|
|
147
|
+
"LayoutPadding--narrow-l--padding-bottom-6": "LayoutPadding--narrow-l--padding-bottom-6__Wj4Fn",
|
|
148
|
+
"LayoutPadding--narrow-l--padding-left-6": "LayoutPadding--narrow-l--padding-left-6__VDjyv",
|
|
141
149
|
"LayoutPadding--narrow-l--padding-top-8": "LayoutPadding--narrow-l--padding-top-8__NZMuy",
|
|
142
150
|
"LayoutPadding--narrow-l--padding-right-8": "LayoutPadding--narrow-l--padding-right-8__q7doZ",
|
|
143
151
|
"LayoutPadding--narrow-l--padding-bottom-8": "LayoutPadding--narrow-l--padding-bottom-8__C65Rt",
|
|
@@ -226,6 +234,10 @@ const styles = {
|
|
|
226
234
|
"LayoutPadding--medium-s--padding-right-4": "LayoutPadding--medium-s--padding-right-4__zPgZT",
|
|
227
235
|
"LayoutPadding--medium-s--padding-bottom-4": "LayoutPadding--medium-s--padding-bottom-4__leuMm",
|
|
228
236
|
"LayoutPadding--medium-s--padding-left-4": "LayoutPadding--medium-s--padding-left-4__PdQHK",
|
|
237
|
+
"LayoutPadding--medium-s--padding-top-6": "LayoutPadding--medium-s--padding-top-6__pUjKJ",
|
|
238
|
+
"LayoutPadding--medium-s--padding-right-6": "LayoutPadding--medium-s--padding-right-6__GL8op",
|
|
239
|
+
"LayoutPadding--medium-s--padding-bottom-6": "LayoutPadding--medium-s--padding-bottom-6__9oE97",
|
|
240
|
+
"LayoutPadding--medium-s--padding-left-6": "LayoutPadding--medium-s--padding-left-6__opxyy",
|
|
229
241
|
"LayoutPadding--medium-s--padding-top-8": "LayoutPadding--medium-s--padding-top-8__xQP0m",
|
|
230
242
|
"LayoutPadding--medium-s--padding-right-8": "LayoutPadding--medium-s--padding-right-8__1TuOH",
|
|
231
243
|
"LayoutPadding--medium-s--padding-bottom-8": "LayoutPadding--medium-s--padding-bottom-8__JhaE-",
|
|
@@ -314,6 +326,10 @@ const styles = {
|
|
|
314
326
|
"LayoutPadding--medium-l--padding-right-4": "LayoutPadding--medium-l--padding-right-4__HPbre",
|
|
315
327
|
"LayoutPadding--medium-l--padding-bottom-4": "LayoutPadding--medium-l--padding-bottom-4__oYdol",
|
|
316
328
|
"LayoutPadding--medium-l--padding-left-4": "LayoutPadding--medium-l--padding-left-4__Lt30f",
|
|
329
|
+
"LayoutPadding--medium-l--padding-top-6": "LayoutPadding--medium-l--padding-top-6__IrQpd",
|
|
330
|
+
"LayoutPadding--medium-l--padding-right-6": "LayoutPadding--medium-l--padding-right-6__kLl9G",
|
|
331
|
+
"LayoutPadding--medium-l--padding-bottom-6": "LayoutPadding--medium-l--padding-bottom-6__DiWSE",
|
|
332
|
+
"LayoutPadding--medium-l--padding-left-6": "LayoutPadding--medium-l--padding-left-6__EU5iC",
|
|
317
333
|
"LayoutPadding--medium-l--padding-top-8": "LayoutPadding--medium-l--padding-top-8__-Uohk",
|
|
318
334
|
"LayoutPadding--medium-l--padding-right-8": "LayoutPadding--medium-l--padding-right-8__8Lp1m",
|
|
319
335
|
"LayoutPadding--medium-l--padding-bottom-8": "LayoutPadding--medium-l--padding-bottom-8__ycySh",
|
|
@@ -402,6 +418,10 @@ const styles = {
|
|
|
402
418
|
"LayoutPadding--wide-s--padding-right-4": "LayoutPadding--wide-s--padding-right-4__6VR7x",
|
|
403
419
|
"LayoutPadding--wide-s--padding-bottom-4": "LayoutPadding--wide-s--padding-bottom-4__YO-ll",
|
|
404
420
|
"LayoutPadding--wide-s--padding-left-4": "LayoutPadding--wide-s--padding-left-4__ytoti",
|
|
421
|
+
"LayoutPadding--wide-s--padding-top-6": "LayoutPadding--wide-s--padding-top-6__U8iUC",
|
|
422
|
+
"LayoutPadding--wide-s--padding-right-6": "LayoutPadding--wide-s--padding-right-6__k8QyJ",
|
|
423
|
+
"LayoutPadding--wide-s--padding-bottom-6": "LayoutPadding--wide-s--padding-bottom-6__hr1OF",
|
|
424
|
+
"LayoutPadding--wide-s--padding-left-6": "LayoutPadding--wide-s--padding-left-6__GeYwX",
|
|
405
425
|
"LayoutPadding--wide-s--padding-top-8": "LayoutPadding--wide-s--padding-top-8__KseoD",
|
|
406
426
|
"LayoutPadding--wide-s--padding-right-8": "LayoutPadding--wide-s--padding-right-8__334Mt",
|
|
407
427
|
"LayoutPadding--wide-s--padding-bottom-8": "LayoutPadding--wide-s--padding-bottom-8__MSfqn",
|
|
@@ -490,6 +510,10 @@ const styles = {
|
|
|
490
510
|
"LayoutPadding--wide-l--padding-right-4": "LayoutPadding--wide-l--padding-right-4__2t62X",
|
|
491
511
|
"LayoutPadding--wide-l--padding-bottom-4": "LayoutPadding--wide-l--padding-bottom-4__gruhw",
|
|
492
512
|
"LayoutPadding--wide-l--padding-left-4": "LayoutPadding--wide-l--padding-left-4__SZyKD",
|
|
513
|
+
"LayoutPadding--wide-l--padding-top-6": "LayoutPadding--wide-l--padding-top-6__rJwJK",
|
|
514
|
+
"LayoutPadding--wide-l--padding-right-6": "LayoutPadding--wide-l--padding-right-6__FtB2Z",
|
|
515
|
+
"LayoutPadding--wide-l--padding-bottom-6": "LayoutPadding--wide-l--padding-bottom-6__6o8N3",
|
|
516
|
+
"LayoutPadding--wide-l--padding-left-6": "LayoutPadding--wide-l--padding-left-6__QjBYB",
|
|
493
517
|
"LayoutPadding--wide-l--padding-top-8": "LayoutPadding--wide-l--padding-top-8__YQ-JN",
|
|
494
518
|
"LayoutPadding--wide-l--padding-right-8": "LayoutPadding--wide-l--padding-right-8__jEnTn",
|
|
495
519
|
"LayoutPadding--wide-l--padding-bottom-8": "LayoutPadding--wide-l--padding-bottom-8__Svom1",
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type Orientation = 'horizontal' | 'vertical';
|
|
3
|
+
type OrientationProviderProps = {
|
|
4
|
+
orientation: Orientation;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Provider that supplies orientation context for keyboard navigation.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* function TabList({ orientation, children }) {
|
|
13
|
+
* return (
|
|
14
|
+
* <OrientationProvider orientation={orientation}>
|
|
15
|
+
* <div role="tablist">{children}</div>
|
|
16
|
+
* </OrientationProvider>
|
|
17
|
+
* );
|
|
18
|
+
* }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function OrientationProvider({ orientation, children }: OrientationProviderProps): React.JSX.Element;
|
|
22
|
+
/**
|
|
23
|
+
* Hook that provides orientation context and keyboard navigation keys.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* function NavigableItem({ children }) {
|
|
28
|
+
* const { nextKey, previousKey } = useOrientation();
|
|
29
|
+
*
|
|
30
|
+
* const handleKeyDown = (e) => {
|
|
31
|
+
* if (e.key === nextKey) focusNext();
|
|
32
|
+
* if (e.key === previousKey) focusPrevious();
|
|
33
|
+
* };
|
|
34
|
+
*
|
|
35
|
+
* return <div role="tab" onKeyDown={handleKeyDown}>{children}</div>;
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export declare function useOrientation(): {
|
|
40
|
+
orientation: Orientation;
|
|
41
|
+
nextKey: string;
|
|
42
|
+
previousKey: string;
|
|
43
|
+
};
|
|
44
|
+
export {};
|
|
45
|
+
//# sourceMappingURL=OrientationProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OrientationProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/Orientation/OrientationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAIpD,KAAK,wBAAwB,GAAG;IAC5B,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,wBAAwB,qBAEtF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc;;;;EAgB7B"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
const ctx = createContext("horizontal");
|
|
4
|
+
function OrientationProvider({
|
|
5
|
+
orientation,
|
|
6
|
+
children
|
|
7
|
+
}) {
|
|
8
|
+
return /* @__PURE__ */ jsx(ctx.Provider, { value: orientation, children });
|
|
9
|
+
}
|
|
10
|
+
function useOrientation() {
|
|
11
|
+
const orientation = useContext(ctx);
|
|
12
|
+
let nextKey = "ArrowRight";
|
|
13
|
+
let previousKey = "ArrowLeft";
|
|
14
|
+
if (orientation === "vertical") {
|
|
15
|
+
nextKey = "ArrowDown";
|
|
16
|
+
previousKey = "ArrowUp";
|
|
17
|
+
}
|
|
18
|
+
return {
|
|
19
|
+
orientation,
|
|
20
|
+
nextKey,
|
|
21
|
+
previousKey
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
OrientationProvider,
|
|
26
|
+
useOrientation
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/Orientation/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|