reshaped 3.9.0-canary.8 → 3.9.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/bundle.css +1 -1
- package/dist/bundle.d.ts +2 -0
- package/dist/bundle.js +2 -2
- package/dist/components/Actionable/Actionable.module.css +1 -1
- package/dist/components/Avatar/Avatar.js +7 -24
- package/dist/components/Avatar/Avatar.module.css +1 -1
- package/dist/components/Badge/Badge.js +2 -2
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/Badge.types.d.ts +1 -1
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Calendar/Calendar.module.css +1 -1
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.types.d.ts +5 -5
- package/dist/components/Checkbox/Checkbox.js +2 -12
- package/dist/components/FileUpload/FileUpload.js +4 -4
- package/dist/components/FileUpload/FileUpload.module.css +1 -1
- package/dist/components/FileUpload/FileUpload.types.d.ts +2 -0
- package/dist/components/Flyout/Flyout.constants.d.ts +1 -0
- package/dist/components/Flyout/Flyout.constants.js +1 -0
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +3 -1
- package/dist/components/Flyout/FlyoutContent.js +2 -1
- package/dist/components/Flyout/FlyoutControlled.js +28 -11
- package/dist/components/Flyout/useFlyout.d.ts +1 -1
- package/dist/components/Flyout/useFlyout.js +3 -3
- package/dist/components/Flyout/utilities/calculatePosition.js +18 -11
- package/dist/components/Flyout/utilities/constants.d.ts +1 -0
- package/dist/components/Flyout/utilities/constants.js +1 -0
- package/dist/components/Flyout/utilities/flyout.js +33 -5
- package/dist/components/Flyout/utilities/isFullyVisible.d.ts +4 -3
- package/dist/components/Flyout/utilities/isFullyVisible.js +5 -4
- package/dist/components/Grid/Grid.types.d.ts +4 -4
- package/dist/components/HiddenInput/HiddenInput.js +33 -0
- package/dist/components/HiddenInput/HiddenInput.types.d.ts +26 -0
- package/dist/components/Image/Image.js +13 -8
- package/dist/components/Image/Image.module.css +1 -1
- package/dist/components/Image/Image.types.d.ts +3 -1
- package/dist/components/Modal/Modal.js +2 -5
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Popover/Popover.module.css +1 -1
- package/dist/components/Radio/Radio.js +2 -12
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Scrim/Scrim.js +4 -3
- package/dist/components/Scrim/Scrim.module.css +1 -1
- package/dist/components/Scrim/Scrim.types.d.ts +2 -1
- package/dist/components/ScrollArea/ScrollArea.js +6 -6
- package/dist/components/Slider/SliderControlled.js +5 -4
- package/dist/components/Tabs/Tabs.module.css +1 -1
- package/dist/components/Tabs/Tabs.types.d.ts +3 -1
- package/dist/components/Tabs/TabsContext.d.ts +1 -0
- package/dist/components/Tabs/TabsControlled.js +2 -1
- package/dist/components/Tabs/TabsItem.js +3 -3
- package/dist/components/Tabs/TabsList.js +9 -5
- package/dist/components/Tabs/TabsPanel.js +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/Text/Text.js +2 -2
- package/dist/components/Text/Text.module.css +1 -1
- package/dist/components/Text/Text.types.d.ts +5 -3
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.css +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
- package/dist/components/View/View.types.d.ts +4 -4
- package/dist/hooks/_private/useDrag.js +0 -3
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/types/global.d.ts +1 -1
- package/dist/utilities/dom/index.d.ts +0 -1
- package/dist/utilities/dom/index.js +0 -1
- package/dist/utilities/scroll/disable.js +4 -2
- package/package.json +4 -98
- package/README.md +0 -24
- package/dist/components/_private/HiddenInput/HiddenInput.js +0 -10
- package/dist/components/_private/HiddenInput/HiddenInput.types.d.ts +0 -15
- package/dist/utilities/dom/userSelect.d.ts +0 -2
- package/dist/utilities/dom/userSelect.js +0 -6
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.d.ts +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.module.css +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/HiddenInput.types.js +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/index.d.ts +0 -0
- /package/dist/components/{_private/HiddenInput → HiddenInput}/index.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{
|
|
1
|
+
@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{--rs-tabs-gap:var(--rs-unit-x6);box-sizing:initial;isolation:isolate;max-width:100%;position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.list{gap:var(--rs-tabs-gap)}.list,.listItem{position:relative}.listItem{flex-shrink:0}.button{--rs-tabs-focus-ring-inset:calc(var(--rs-unit-x2) * -1);position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}[data-rs-keyboard] .button:focus:after{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-focus-inset);content:"";inset:0;inset-inline:var(--rs-tabs-focus-ring-inset);pointer-events:none;position:absolute}.buttonContent{align-items:center;border-radius:var(--rs-radius-medium);box-sizing:border-box;display:flex;width:100%}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.item{color:var(--rs-color-foreground-neutral)}.item:after{content:"";opacity:0;pointer-events:none}.item--active.item:after{opacity:1}.item.item--disabled{color:var(--rs-color-foreground-disabled)}.root:not(:has(.selector)) .item:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.item:after,.selector{background:var(--rs-color-border-primary);border-radius:var(--rs-radius-medium);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.panel.panel--hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .item:after{inset-inline:0;bottom:0;height:2px}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin-block:var(--rs-unit-x1)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .item:after{inset-block:0;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);inset-inline-end:0;top:0;width:2px}.--direction-column .button{--rs-tabs-focus-ring-inset:0;margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills,.--variant-pills-elevated{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .button,.--variant-pills-elevated .button{--rs-tabs-focus-ring-inset:0;margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--variant-pills .item:after,.--variant-pills-elevated .item:after{background-color:var(--rs-color-background-neutral);z-index:0}.--variant-pills-elevated.--direction-column .item:after,.--variant-pills.--direction-column .item:after{width:100%}.--variant-pills-elevated.--direction-column .selector,.--variant-pills.--direction-column .selector{left:0}.--variant-pills-elevated.--direction-row .item:after,.--variant-pills.--direction-row .item:after{height:100%}.--variant-pills-elevated.--direction-row .selector,.--variant-pills.--direction-row .selector{top:0}.--variant-pills .item--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills-elevated .item:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);box-sizing:border-box}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;min-width:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--item-width-equal .button{--rs-tabs-focus-ring-inset:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
|
|
@@ -53,6 +53,8 @@ export type BaseProps = {
|
|
|
53
53
|
size?: "medium" | "large";
|
|
54
54
|
/** Name of the tab buttons group when used as a form control */
|
|
55
55
|
name?: string;
|
|
56
|
+
/** Disable the animation of the tab button selection */
|
|
57
|
+
disableSelectionAnimation?: boolean;
|
|
56
58
|
/** Callback when the active tab value changes */
|
|
57
59
|
onChange?: (args: {
|
|
58
60
|
value: string;
|
|
@@ -75,7 +77,7 @@ export type UncontrolledProps = BaseProps & {
|
|
|
75
77
|
defaultValue?: string;
|
|
76
78
|
};
|
|
77
79
|
export type Props = ControlledProps | UncontrolledProps;
|
|
78
|
-
export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
|
|
80
|
+
export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction" | "disableSelectionAnimation"> & {
|
|
79
81
|
size: NonNullable<BaseProps["size"]>;
|
|
80
82
|
value?: string;
|
|
81
83
|
setDefaultValue: (value: string) => void;
|
|
@@ -12,6 +12,7 @@ export declare const useTabs: (value?: string) => {
|
|
|
12
12
|
name?: string;
|
|
13
13
|
}) => void) | undefined;
|
|
14
14
|
itemWidth?: "equal" | undefined;
|
|
15
|
+
disableSelectionAnimation?: boolean | undefined;
|
|
15
16
|
size: NonNullable<T.BaseProps["size"]>;
|
|
16
17
|
value?: string;
|
|
17
18
|
setDefaultValue: (value: string) => void;
|
|
@@ -4,7 +4,7 @@ import React from "react";
|
|
|
4
4
|
import useElementId from "../../hooks/useElementId.js";
|
|
5
5
|
import { TabsProvider } from "./TabsContext.js";
|
|
6
6
|
const TabsControlled = (props) => {
|
|
7
|
-
const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
|
|
7
|
+
const { children, value, onChange, onSilentChange, itemWidth, variant, name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
|
|
8
8
|
const id = useElementId();
|
|
9
9
|
const elActiveRef = React.useRef(null);
|
|
10
10
|
// eslint-disable-next-line react-hooks/refs
|
|
@@ -38,6 +38,7 @@ const TabsControlled = (props) => {
|
|
|
38
38
|
elScrollableRef,
|
|
39
39
|
selection,
|
|
40
40
|
setSelection,
|
|
41
|
+
disableSelectionAnimation,
|
|
41
42
|
}, children: children }));
|
|
42
43
|
};
|
|
43
44
|
TabsControlled.displayName = "TabsControlled";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
|
-
import HiddenInput from "../_private/HiddenInput/index.js";
|
|
5
4
|
import Actionable from "../Actionable/index.js";
|
|
5
|
+
import HiddenInput from "../HiddenInput/index.js";
|
|
6
6
|
import Icon from "../Icon/index.js";
|
|
7
7
|
import Text from "../Text/index.js";
|
|
8
8
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
|
@@ -16,7 +16,7 @@ const TabsItem = React.forwardRef((props, ref) => {
|
|
|
16
16
|
const itemRef = React.useRef(null);
|
|
17
17
|
const active = tabsValue === value;
|
|
18
18
|
const visuallySelected = active && selection.status === "idle";
|
|
19
|
-
const itemClassNames = classNames(s.item, visuallySelected && s["--
|
|
19
|
+
const itemClassNames = classNames(s.item, visuallySelected && s["item--active"], disabled && s["item--disabled"]);
|
|
20
20
|
const isFormControl = !!name;
|
|
21
21
|
const tabAttributes = {
|
|
22
22
|
role: "tab",
|
|
@@ -60,7 +60,7 @@ const TabsItem = React.forwardRef((props, ref) => {
|
|
|
60
60
|
return;
|
|
61
61
|
updateRefs();
|
|
62
62
|
}, [active, updateRefs]);
|
|
63
|
-
return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href,
|
|
63
|
+
return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, disableFocusRing: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
|
|
64
64
|
...(!isFormControl && tabAttributes),
|
|
65
65
|
"aria-controls": panelId,
|
|
66
66
|
id: buttonId,
|
|
@@ -22,11 +22,11 @@ const findParentItem = (el, rootEl) => {
|
|
|
22
22
|
};
|
|
23
23
|
const TabsList = (props) => {
|
|
24
24
|
const { children, className, attributes } = props;
|
|
25
|
-
const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
|
|
25
|
+
const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, disableSelectionAnimation, } = useTabs();
|
|
26
26
|
const [rtl] = useRTL();
|
|
27
27
|
const fadeSide = useFadeSide(elScrollableRef, { disabled: itemWidth === "equal" });
|
|
28
28
|
const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
|
|
29
|
-
const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--
|
|
29
|
+
const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["selector--hidden"], selection.status === "animated" && s["selector--animated"]);
|
|
30
30
|
const handleNextClick = () => {
|
|
31
31
|
elScrollableRef.current.scrollBy({
|
|
32
32
|
// Using ceil here since during the second navigation half of the value may be
|
|
@@ -79,8 +79,12 @@ const TabsList = (props) => {
|
|
|
79
79
|
const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
|
|
80
80
|
if (!selectionStyle)
|
|
81
81
|
return;
|
|
82
|
+
if (disableSelectionAnimation) {
|
|
83
|
+
setSelection({ ...selectionStyle, status: "idle" });
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
82
86
|
setSelection({ ...selectionStyle, status: "prepared" });
|
|
83
|
-
}, [value, getElementSelectionStyle]);
|
|
87
|
+
}, [value, getElementSelectionStyle, disableSelectionAnimation]);
|
|
84
88
|
useIsomorphicLayoutEffect(() => {
|
|
85
89
|
if (selection.status !== "prepared" || !elActiveRef.current)
|
|
86
90
|
return;
|
|
@@ -94,12 +98,12 @@ const TabsList = (props) => {
|
|
|
94
98
|
return null;
|
|
95
99
|
const props = child.props;
|
|
96
100
|
return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, props.value || child.key || index));
|
|
97
|
-
}), _jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
|
|
101
|
+
}), !disableSelectionAnimation && (_jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
|
|
98
102
|
"--rs-tab-selection-x": selection.left,
|
|
99
103
|
"--rs-tab-selection-y": selection.top,
|
|
100
104
|
"--rs-tab-selection-scale-x": selection.scaleX,
|
|
101
105
|
"--rs-tab-selection-scale-y": selection.scaleY,
|
|
102
|
-
} })] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
106
|
+
} }))] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
103
107
|
s.control,
|
|
104
108
|
s["control--prev"],
|
|
105
109
|
(fadeSide === "start" || fadeSide === "both") && s["control--active"],
|
|
@@ -11,7 +11,7 @@ const TabsPanel = (props) => {
|
|
|
11
11
|
const [needsTabIndex, setNeedsTabIndex] = React.useState(true);
|
|
12
12
|
const rootRef = React.useRef(null);
|
|
13
13
|
const active = panelValue === value;
|
|
14
|
-
const panelClassNames = classNames(s.panel, !active && s["--
|
|
14
|
+
const panelClassNames = classNames(s.panel, !active && s["panel--hidden"], className);
|
|
15
15
|
React.useEffect(() => {
|
|
16
16
|
const el = rootRef.current;
|
|
17
17
|
if (!el)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type * as T from "./Text.types";
|
|
2
2
|
declare const Text: {
|
|
3
|
-
<As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
export default Text;
|
|
@@ -11,13 +11,13 @@ const tagMap = {
|
|
|
11
11
|
"title-6": "h6",
|
|
12
12
|
};
|
|
13
13
|
const Text = (props) => {
|
|
14
|
-
const { variant, color, weight, align, decoration, maxLines, wrap, monospace, children, className, attributes, } = props;
|
|
14
|
+
const { variant, color, weight, align, decoration, maxLines, wrap, monospace, numeric, children, className, attributes, } = props;
|
|
15
15
|
const largestVariant = typeof variant === "string" ? variant : variant?.xl || variant?.l || variant?.m || variant?.s;
|
|
16
16
|
const mixinStyles = resolveMixin({ textAlign: align });
|
|
17
17
|
// Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
|
|
18
18
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
19
|
const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
|
|
20
|
-
const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--weight", weight), decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], monospace && s["--monospace"], className, mixinStyles.classNames);
|
|
20
|
+
const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--weight", weight), decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], monospace && s["--monospace"], numeric && s["--numeric"], className, mixinStyles.classNames);
|
|
21
21
|
const style = {
|
|
22
22
|
...attributes?.style,
|
|
23
23
|
...mixinStyles.variables,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer rs.text.reset{.root{font-family:unset;font-size:unset;font-style:normal;font-weight:unset;letter-spacing:0;margin:0;padding:0;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none}}.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1,.--variant-featured-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-2,.--variant-body-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
|
|
1
|
+
@layer rs.text.reset{.root{font-family:unset;font-size:unset;font-style:normal;font-weight:unset;letter-spacing:0;margin:0;padding:0;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none}}.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--numeric{font-variant-numeric:tabular-nums}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1,.--variant-featured-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-2,.--variant-body-3{font-weight:var(--rs-font-weight-regular)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type * as G from "../../types/global";
|
|
3
3
|
export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
|
|
4
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
4
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
5
5
|
/** Text render variant */
|
|
6
6
|
variant?: G.Responsive<Variant>;
|
|
7
7
|
/** Text font weight */
|
|
@@ -18,12 +18,14 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
18
18
|
decoration?: "line-through";
|
|
19
19
|
/** Maximum number of lines to render, used for text truncation */
|
|
20
20
|
maxLines?: number;
|
|
21
|
-
/** Render as a
|
|
22
|
-
|
|
21
|
+
/** Render as a numeric value to preserve the width of each character */
|
|
22
|
+
numeric?: true;
|
|
23
23
|
/** Node for inserting children */
|
|
24
24
|
children?: React.ReactNode;
|
|
25
25
|
/** Additional classname for the root element */
|
|
26
26
|
className?: G.ClassName;
|
|
27
27
|
/** Additional attributes for the root element */
|
|
28
28
|
attributes?: G.Attributes<TagName>;
|
|
29
|
+
/** Render as a different html tag */
|
|
30
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
29
31
|
};
|
|
@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
|
|
|
5
5
|
import Theme from "../Theme/index.js";
|
|
6
6
|
import s from "./Tooltip.module.css";
|
|
7
7
|
const Tooltip = (props) => {
|
|
8
|
-
const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
|
|
8
|
+
const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
|
|
9
9
|
if (!text)
|
|
10
10
|
return children({ ref: null });
|
|
11
11
|
return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover",
|
|
12
12
|
// Disable group timeouts by default since it's not controlled by the default user events
|
|
13
|
-
groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
|
|
13
|
+
groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
|
|
14
14
|
};
|
|
15
15
|
Tooltip.displayName = "Tooltip";
|
|
16
16
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
|
|
3
|
-
export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
|
|
3
|
+
export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
|
|
4
4
|
/** Node for inserting children */
|
|
5
5
|
children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
|
|
6
6
|
/** Text content for the tooltip */
|
|
@@ -3,11 +3,11 @@ import type * as TStyles from "../../styles/types";
|
|
|
3
3
|
import type * as G from "../../types/global";
|
|
4
4
|
type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
|
|
5
5
|
export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
|
|
6
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
6
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
7
7
|
/** Node for inserting the content */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
/** Render as a different element */
|
|
10
|
-
as?: TagName;
|
|
10
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
11
11
|
/** Render a divider between each child */
|
|
12
12
|
divided?: boolean;
|
|
13
13
|
/** Flex direction for the content */
|
|
@@ -97,7 +97,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
97
97
|
/** Additional attributes for the root element */
|
|
98
98
|
attributes?: G.Attributes<TagName>;
|
|
99
99
|
} & Pick<ItemProps, "grow" | "shrink">;
|
|
100
|
-
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements =
|
|
100
|
+
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
101
101
|
/** Flex order of the item inside the parent */
|
|
102
102
|
order?: G.Responsive<number>;
|
|
103
103
|
/** Number of columns the item should span in the parent, View uses 12 columns */
|
|
@@ -109,7 +109,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
|
|
|
109
109
|
/** Individual gap before the item, overrides the parent View gap */
|
|
110
110
|
gapBefore?: G.Responsive<number> | "auto";
|
|
111
111
|
/** Render as a different element */
|
|
112
|
-
as?: TagName;
|
|
112
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
113
113
|
/** Additional attributes for the root element */
|
|
114
114
|
attributes?: G.Attributes<TagName>;
|
|
115
115
|
/** Additional classname for the root element */
|
|
@@ -4,7 +4,6 @@ import * as keys from "../../constants/keys.js";
|
|
|
4
4
|
import useHandlerRef from "../useHandlerRef.js";
|
|
5
5
|
import useHotkeys from "../useHotkeys.js";
|
|
6
6
|
import useToggle from "../useToggle.js";
|
|
7
|
-
import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
|
|
8
7
|
import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
|
|
9
8
|
const useDrag = (cb, options) => {
|
|
10
9
|
const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
|
|
@@ -76,7 +75,6 @@ const useDrag = (cb, options) => {
|
|
|
76
75
|
const handleDragEnd = () => {
|
|
77
76
|
triggerCompensationRef.current = { x: 0, y: 0 };
|
|
78
77
|
toggle.deactivate();
|
|
79
|
-
enableUserSelect();
|
|
80
78
|
enableScroll();
|
|
81
79
|
};
|
|
82
80
|
document.addEventListener("touchmove", handleDrag, { passive: true });
|
|
@@ -103,7 +101,6 @@ const useDrag = (cb, options) => {
|
|
|
103
101
|
y: resolvedEvent.clientY - triggerRect.y,
|
|
104
102
|
};
|
|
105
103
|
toggle.activate();
|
|
106
|
-
disableUserSelect();
|
|
107
104
|
disableScroll();
|
|
108
105
|
};
|
|
109
106
|
triggerEl.addEventListener("touchstart", handleStart, { passive: true });
|
package/dist/index.d.ts
CHANGED
|
@@ -110,6 +110,8 @@ export { default as Grid } from "./components/Grid";
|
|
|
110
110
|
export type { GridProps, GridItemProps } from "./components/Grid";
|
|
111
111
|
export { default as Hidden } from "./components/Hidden";
|
|
112
112
|
export type { HiddenProps } from "./components/Hidden";
|
|
113
|
+
export { default as HiddenInput } from "./components/HiddenInput";
|
|
114
|
+
export type { HiddenInputProps } from "./components/HiddenInput";
|
|
113
115
|
export { default as HiddenVisually } from "./components/HiddenVisually";
|
|
114
116
|
export type { HiddenVisuallyProps } from "./components/HiddenVisually";
|
|
115
117
|
export { default as Icon } from "./components/Icon";
|
package/dist/index.js
CHANGED
|
@@ -57,6 +57,7 @@ export { default as Flyout } from "./components/Flyout/index.js";
|
|
|
57
57
|
export { default as FormControl } from "./components/FormControl/index.js";
|
|
58
58
|
export { default as Grid } from "./components/Grid/index.js";
|
|
59
59
|
export { default as Hidden } from "./components/Hidden/index.js";
|
|
60
|
+
export { default as HiddenInput } from "./components/HiddenInput/index.js";
|
|
60
61
|
export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
|
|
61
62
|
export { default as Icon } from "./components/Icon/index.js";
|
|
62
63
|
export { default as Image } from "./components/Image/index.js";
|
package/dist/types/global.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
|
|
|
7
7
|
export type CSSVariable = `--${string}`;
|
|
8
8
|
export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
|
|
9
9
|
type DataAttributes = object | Record<`data-${string}`, string | boolean>;
|
|
10
|
-
export type Attributes<TagName extends keyof React.JSX.IntrinsicElements =
|
|
10
|
+
export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
|
|
11
11
|
style?: StyleAttribute;
|
|
12
12
|
};
|
|
13
13
|
export type Viewport = "s" | "m" | "l" | "xl";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { getRectFromCoordinates } from "./flyout";
|
|
2
2
|
export { getShadowRoot } from "./shadowDom";
|
|
3
|
-
export { enableUserSelect, disableUserSelect } from "./userSelect";
|
|
4
3
|
export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
|
|
5
4
|
export { triggerChangeEvent } from "./event";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { getRectFromCoordinates } from "./flyout.js";
|
|
2
2
|
export { getShadowRoot } from "./shadowDom.js";
|
|
3
|
-
export { enableUserSelect, disableUserSelect } from "./userSelect.js";
|
|
4
3
|
export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
|
|
5
4
|
export { triggerChangeEvent } from "./event.js";
|
|
@@ -4,10 +4,12 @@ export const preventDefault = (e) => e.preventDefault();
|
|
|
4
4
|
* without locking the page with overflow
|
|
5
5
|
*/
|
|
6
6
|
export const disableScroll = () => {
|
|
7
|
-
window.addEventListener("wheel", preventDefault);
|
|
8
|
-
window.addEventListener("touchmove", preventDefault);
|
|
7
|
+
window.addEventListener("wheel", preventDefault, { passive: false });
|
|
8
|
+
window.addEventListener("touchmove", preventDefault, { passive: false });
|
|
9
|
+
document.body.style.userSelect = "none";
|
|
9
10
|
};
|
|
10
11
|
export const enableScroll = () => {
|
|
11
12
|
window.removeEventListener("wheel", preventDefault);
|
|
12
13
|
window.removeEventListener("touchmove", preventDefault);
|
|
14
|
+
document.body.style.userSelect = "";
|
|
13
15
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.9.0
|
|
4
|
+
"version": "3.9.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
],
|
|
21
21
|
"repository": {
|
|
22
22
|
"type": "git",
|
|
23
|
-
"url": "https://github.com/reshaped-ui/reshaped.git"
|
|
23
|
+
"url": "https://github.com/reshaped-ui/reshaped.git",
|
|
24
|
+
"directory": "packages/reshaped"
|
|
24
25
|
},
|
|
25
26
|
"bugs": {
|
|
26
27
|
"url": "https://github.com/reshaped-ui/reshaped/issues"
|
|
@@ -77,69 +78,12 @@
|
|
|
77
78
|
"browserslist": [
|
|
78
79
|
"defaults and not IE 11"
|
|
79
80
|
],
|
|
80
|
-
"devDependencies": {
|
|
81
|
-
"@changesets/cli": "2.29.7",
|
|
82
|
-
"@commitlint/cli": "20.1.0",
|
|
83
|
-
"@commitlint/config-conventional": "20.0.0",
|
|
84
|
-
"@commitlint/types": "20.0.0",
|
|
85
|
-
"@eslint/js": "9.38.0",
|
|
86
|
-
"@size-limit/preset-big-lib": "11.2.0",
|
|
87
|
-
"@storybook/addon-a11y": "10.0.0",
|
|
88
|
-
"@storybook/addon-docs": "10.0.0",
|
|
89
|
-
"@storybook/addon-vitest": "10.0.0",
|
|
90
|
-
"@storybook/react": "10.0.0",
|
|
91
|
-
"@storybook/react-vite": "10.0.0",
|
|
92
|
-
"@testing-library/user-event": "14.6.1",
|
|
93
|
-
"@types/culori": "4.0.1",
|
|
94
|
-
"@types/events": "3.0.3",
|
|
95
|
-
"@types/node": "24.9.2",
|
|
96
|
-
"@types/react": "19.2.2",
|
|
97
|
-
"@types/react-dom": "19.2.2",
|
|
98
|
-
"@vitejs/plugin-react": "5.1.0",
|
|
99
|
-
"@vitest/browser": "4.0.4",
|
|
100
|
-
"@vitest/browser-playwright": "4.0.4",
|
|
101
|
-
"@vitest/coverage-istanbul": "4.0.4",
|
|
102
|
-
"@vitest/coverage-v8": "4.0.4",
|
|
103
|
-
"chromatic": "13.3.2",
|
|
104
|
-
"eslint": "9.38.0",
|
|
105
|
-
"eslint-config-prettier": "10.1.8",
|
|
106
|
-
"eslint-import-resolver-typescript": "^4.4.4",
|
|
107
|
-
"eslint-plugin-import": "2.32.0",
|
|
108
|
-
"eslint-plugin-jsx-a11y": "6.10.2",
|
|
109
|
-
"eslint-plugin-prettier": "5.5.4",
|
|
110
|
-
"eslint-plugin-react": "7.37.5",
|
|
111
|
-
"eslint-plugin-react-hooks": "7.0.1",
|
|
112
|
-
"lefthook": "2.0.1",
|
|
113
|
-
"playwright": "1.56.1",
|
|
114
|
-
"postcss": "8.5.6",
|
|
115
|
-
"postcss-cli": "11.0.1",
|
|
116
|
-
"postcss-each": "1.1.0",
|
|
117
|
-
"postcss-nested": "7.0.2",
|
|
118
|
-
"prettier": "3.6.2",
|
|
119
|
-
"react": "18",
|
|
120
|
-
"react-dom": "18",
|
|
121
|
-
"react-shadow": "20.6.0",
|
|
122
|
-
"resolve-tspaths": "0.8.23",
|
|
123
|
-
"size-limit": "11.2.0",
|
|
124
|
-
"storybook": "10.0.0",
|
|
125
|
-
"stylelint": "16.25.0",
|
|
126
|
-
"stylelint-config-prettier": "9.0.5",
|
|
127
|
-
"stylelint-config-standard": "39.0.1",
|
|
128
|
-
"ts-node": "10.9.2",
|
|
129
|
-
"typescript": "5.9.3",
|
|
130
|
-
"typescript-eslint": "8.46.2",
|
|
131
|
-
"vite": "7.1.12",
|
|
132
|
-
"vite-tsconfig-paths": "5.1.4",
|
|
133
|
-
"vitest": "4.0.4",
|
|
134
|
-
"vitest-browser-react": "2.0.2"
|
|
135
|
-
},
|
|
136
81
|
"peerDependencies": {
|
|
137
82
|
"postcss": "^8",
|
|
138
83
|
"react": "^18 || ^19",
|
|
139
84
|
"react-dom": "^18 || ^19"
|
|
140
85
|
},
|
|
141
86
|
"dependencies": {
|
|
142
|
-
"@changesets/changelog-github": "0.5.1",
|
|
143
87
|
"@csstools/postcss-global-data": "3.1.0",
|
|
144
88
|
"chalk": "4.1.2",
|
|
145
89
|
"commander": "14.0.2",
|
|
@@ -148,36 +92,8 @@
|
|
|
148
92
|
"culori": "4.0.2",
|
|
149
93
|
"postcss-custom-media": "11.0.6"
|
|
150
94
|
},
|
|
151
|
-
"size-limit": [
|
|
152
|
-
{
|
|
153
|
-
"name": "Library / JS",
|
|
154
|
-
"path": "dist/bundle.js",
|
|
155
|
-
"webpack": false
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"name": "Library / CSS",
|
|
159
|
-
"path": "dist/bundle.css",
|
|
160
|
-
"webpack": false
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "Theming / JS",
|
|
164
|
-
"path": "dist/tests/themingWithoutDefinition.js",
|
|
165
|
-
"webpack": true
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"name": "Theming with a default theme definition / JS",
|
|
169
|
-
"path": "dist/tests/themingWithDefinition.js",
|
|
170
|
-
"webpack": true
|
|
171
|
-
}
|
|
172
|
-
],
|
|
173
|
-
"engines": {
|
|
174
|
-
"node": ">=22"
|
|
175
|
-
},
|
|
176
95
|
"scripts": {
|
|
177
|
-
"dev": "storybook dev -p 3001 --disable-telemetry",
|
|
178
96
|
"clean": "sh ./bin/clean.sh",
|
|
179
|
-
"commit": "git-cz",
|
|
180
|
-
"changeset": "changeset",
|
|
181
97
|
"build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
|
|
182
98
|
"build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
|
|
183
99
|
"build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
|
|
@@ -185,19 +101,9 @@
|
|
|
185
101
|
"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
|
|
186
102
|
"build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
|
|
187
103
|
"build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
|
|
188
|
-
"build:storybook": "storybook build -o dist/app --disable-telemetry",
|
|
189
|
-
"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
|
|
190
|
-
"release": "sh ./bin/release.sh",
|
|
191
|
-
"release:canary": "sh ./bin/release-canary.sh",
|
|
192
104
|
"release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
|
|
193
|
-
"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
|
|
194
|
-
"test:vrt": "pnpm chromatic",
|
|
195
|
-
"test:vrt:turbo": "pnpm chromatic --only-changed",
|
|
196
105
|
"test:browser": "vitest run --project=storybook",
|
|
197
106
|
"test:unit": "vitest run --project=unit",
|
|
198
|
-
"test:size": "size-limit"
|
|
199
|
-
"lint": "pnpm lint:js && pnpm lint:css",
|
|
200
|
-
"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
|
|
201
|
-
"lint:css": "stylelint 'src/**/*.css'"
|
|
107
|
+
"test:size": "size-limit"
|
|
202
108
|
}
|
|
203
109
|
}
|
package/README.md
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# Reshaped
|
|
2
|
-
|
|
3
|
-
<img width="2400" height="1260" alt="3 0 (1)" src="https://github.com/user-attachments/assets/ef632fe9-9446-430f-b87d-bebebe6fb595" />
|
|
4
|
-
<br /><br />
|
|
5
|
-
|
|
6
|
-
Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.
|
|
7
|
-
|
|
8
|
-
<br />
|
|
9
|
-
|
|
10
|
-
## Documentation
|
|
11
|
-
|
|
12
|
-
To get started, check out the [Reshaped documentation](https://reshaped.so/docs/getting-started/overview).
|
|
13
|
-
|
|
14
|
-
## Contributing
|
|
15
|
-
|
|
16
|
-
Read our [contribution guide](CONTRIBUTING.md) to learn about our principles, development process and testing.
|
|
17
|
-
|
|
18
|
-
## Maintainers
|
|
19
|
-
|
|
20
|
-
- Dmitry Belyaev, [@blvdmitry](https://x.com/blvdmitry)
|
|
21
|
-
|
|
22
|
-
## License
|
|
23
|
-
|
|
24
|
-
This project is licensed under the terms of the MIT license.
|