reshaped 3.9.0-canary.16 → 3.9.0-canary.18
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.js +2 -2
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.types.d.ts +5 -5
- package/dist/components/Flyout/Flyout.constants.d.ts +1 -0
- package/dist/components/Flyout/Flyout.constants.js +1 -0
- package/dist/components/Flyout/FlyoutControlled.js +16 -5
- package/dist/components/Flyout/utilities/flyout.js +15 -3
- package/dist/components/Grid/Grid.types.d.ts +4 -4
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/Text/Text.types.d.ts +3 -3
- package/dist/components/View/View.types.d.ts +4 -4
- package/dist/types/global.d.ts +1 -1
- package/package.json +4 -98
- package/README.md +0 -24
|
@@ -7,10 +7,10 @@ declare const Card: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
onClick?: import("../Actionable").ActionableProps["onClick"];
|
|
9
9
|
href?: string;
|
|
10
|
-
as?: keyof React.JSX.IntrinsicElements | undefined;
|
|
11
10
|
className?: import("../../types/global").ClassName;
|
|
12
11
|
attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
|
13
12
|
ref?: import("../Actionable/Actionable.types").AttributesRef;
|
|
14
13
|
}) | undefined)) | undefined;
|
|
14
|
+
as?: keyof React.JSX.IntrinsicElements | undefined;
|
|
15
15
|
} & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
|
16
16
|
export default Card;
|
|
@@ -2,7 +2,7 @@ import type { ActionableProps } from "../Actionable";
|
|
|
2
2
|
import type { ViewProps } from "../View";
|
|
3
3
|
import type React from "react";
|
|
4
4
|
import type * as G from "../../types/global";
|
|
5
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
5
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
6
6
|
/** Component padding, base unit multiplier */
|
|
7
7
|
padding?: G.Responsive<number>;
|
|
8
8
|
/** Remove side borders and apply negative margins, base unit multiplier */
|
|
@@ -17,12 +17,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
17
17
|
onClick?: ActionableProps["onClick"];
|
|
18
18
|
/** URL to navigate to when the component is clicked, turns component into a link */
|
|
19
19
|
href?: string;
|
|
20
|
-
/** Custom component tag name
|
|
21
|
-
* @default "div"
|
|
22
|
-
*/
|
|
23
|
-
as?: TagName;
|
|
24
20
|
/** Additional classname for the root element */
|
|
25
21
|
className?: G.ClassName;
|
|
26
22
|
/** Additional attributes for the root element */
|
|
27
23
|
attributes?: G.Attributes<TagName> & ActionableProps["attributes"];
|
|
24
|
+
/** Custom component tag name
|
|
25
|
+
* @default "div"
|
|
26
|
+
*/
|
|
27
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
28
28
|
} & Pick<ViewProps, "height">;
|
|
@@ -104,7 +104,7 @@ const FlyoutControlled = (props) => {
|
|
|
104
104
|
return;
|
|
105
105
|
onCloseRef.current?.({ reason: options.reason });
|
|
106
106
|
if (options?.closeParents) {
|
|
107
|
-
parentFlyoutContext?.handleClose?.({});
|
|
107
|
+
parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
|
|
108
108
|
}
|
|
109
109
|
}, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
|
|
110
110
|
/**
|
|
@@ -144,9 +144,13 @@ const FlyoutControlled = (props) => {
|
|
|
144
144
|
cooldown.warm();
|
|
145
145
|
timerRef.current = setTimeout(() => {
|
|
146
146
|
handleOpen();
|
|
147
|
-
}, groupTimeouts && cooldown.status === "warming"
|
|
147
|
+
}, groupTimeouts && cooldown.status === "warming"
|
|
148
|
+
? timeouts.mouseEnter
|
|
149
|
+
: isSubmenu
|
|
150
|
+
? timeouts.mouseEnter
|
|
151
|
+
: 0);
|
|
148
152
|
}
|
|
149
|
-
}, [clearTimer, handleOpen, groupTimeouts]);
|
|
153
|
+
}, [clearTimer, handleOpen, groupTimeouts, isSubmenu]);
|
|
150
154
|
const handleMouseLeave = React.useCallback((e) => {
|
|
151
155
|
if (e.relatedTarget === flyoutElRef.current ||
|
|
152
156
|
(e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
|
|
@@ -156,8 +160,15 @@ const FlyoutControlled = (props) => {
|
|
|
156
160
|
return;
|
|
157
161
|
cooldown.cool();
|
|
158
162
|
clearTimer();
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
if (isSubmenu) {
|
|
164
|
+
timerRef.current = setTimeout(() => {
|
|
165
|
+
handleClose({});
|
|
166
|
+
}, timeouts.mouseLeave);
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
handleClose({});
|
|
170
|
+
}
|
|
171
|
+
}, [clearTimer, handleClose, triggerElRef, flyoutElRef, isSubmenu]);
|
|
161
172
|
const handleTriggerClick = React.useCallback(() => {
|
|
162
173
|
if (!isRendered) {
|
|
163
174
|
handleOpen();
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
|
|
2
2
|
import { resetStyles } from "../Flyout.constants.js";
|
|
3
3
|
import calculatePosition from "./calculatePosition.js";
|
|
4
|
+
import { SCREEN_OFFSET } from "./constants.js";
|
|
4
5
|
import getPositionFallbacks from "./getPositionFallbacks.js";
|
|
5
6
|
import isFullyVisible from "./isFullyVisible.js";
|
|
6
7
|
/**
|
|
@@ -33,8 +34,6 @@ const flyout = (args) => {
|
|
|
33
34
|
const shadowRoot = triggerEl && getShadowRoot(triggerEl);
|
|
34
35
|
// Insert inside shadow root if possible to make sure styles are applied correctly
|
|
35
36
|
(shadowRoot || document.body).appendChild(targetClone);
|
|
36
|
-
const cloneRect = targetClone.getBoundingClientRect();
|
|
37
|
-
const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
|
|
38
37
|
const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
|
|
39
38
|
const container = passedContainer ||
|
|
40
39
|
// Render inside fixed position container automatically to keep their position synced on scroll
|
|
@@ -42,6 +41,19 @@ const flyout = (args) => {
|
|
|
42
41
|
document.body;
|
|
43
42
|
const renderContainerBounds = container.getBoundingClientRect();
|
|
44
43
|
const applyPosition = (position, options) => {
|
|
44
|
+
const widthOption = options?.width || width;
|
|
45
|
+
// If there is a width override, apply it to calculate the position and the height correctly
|
|
46
|
+
if (widthOption === "full") {
|
|
47
|
+
targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
|
|
48
|
+
}
|
|
49
|
+
else if (widthOption === "trigger") {
|
|
50
|
+
targetClone.style.width = `${resolvedTriggerBounds.width}px`;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
targetClone.style.width = "";
|
|
54
|
+
}
|
|
55
|
+
const cloneRect = targetClone.getBoundingClientRect();
|
|
56
|
+
const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
|
|
45
57
|
return calculatePosition({
|
|
46
58
|
triggerBounds: resolvedTriggerBounds,
|
|
47
59
|
flyoutBounds,
|
|
@@ -50,7 +62,7 @@ const flyout = (args) => {
|
|
|
50
62
|
contentGap: contentGap * unitModifier,
|
|
51
63
|
contentShift: contentShift * unitModifier,
|
|
52
64
|
rtl,
|
|
53
|
-
width:
|
|
65
|
+
width: widthOption,
|
|
54
66
|
passedContainer: passedContainer ||
|
|
55
67
|
(closestFixedContainer !== document.body ? closestFixedContainer : undefined),
|
|
56
68
|
fallbackAdjustLayout,
|
|
@@ -2,7 +2,7 @@ import type { Property } from "csstype";
|
|
|
2
2
|
import type React from "react";
|
|
3
3
|
import type * as TStyles from "../../styles/types";
|
|
4
4
|
import type * as G from "../../types/global";
|
|
5
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
5
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
6
6
|
/** Gap between grid items */
|
|
7
7
|
gap?: G.Responsive<number>;
|
|
8
8
|
/** Horizontal gap between grid items */
|
|
@@ -34,13 +34,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
34
34
|
/** Node for inserting children */
|
|
35
35
|
children?: React.ReactNode;
|
|
36
36
|
/** Custom root element html tag */
|
|
37
|
-
as?: TagName;
|
|
37
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
38
38
|
/** Additional classname for the root element */
|
|
39
39
|
className?: G.ClassName;
|
|
40
40
|
/** Additional attributes for the root element */
|
|
41
41
|
attributes?: G.Attributes<TagName>;
|
|
42
42
|
};
|
|
43
|
-
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements =
|
|
43
|
+
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
44
44
|
/** Grid area for template syntax */
|
|
45
45
|
area?: string;
|
|
46
46
|
/** Starting column position */
|
|
@@ -58,7 +58,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
|
|
|
58
58
|
/** Node for inserting children */
|
|
59
59
|
children?: React.ReactNode;
|
|
60
60
|
/** Custom item element html tag */
|
|
61
|
-
as?: TagName;
|
|
61
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
62
62
|
/** Additional classname for the item element */
|
|
63
63
|
className?: G.ClassName;
|
|
64
64
|
/** Additional attributes for the item element */
|
|
@@ -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;
|
|
@@ -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 */
|
|
@@ -20,12 +20,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
20
20
|
maxLines?: number;
|
|
21
21
|
/** Render as a numeric value to preserve the width of each character */
|
|
22
22
|
numeric?: true;
|
|
23
|
-
/** Render as a different html tag */
|
|
24
|
-
as?: TagName;
|
|
25
23
|
/** Node for inserting children */
|
|
26
24
|
children?: React.ReactNode;
|
|
27
25
|
/** Additional classname for the root element */
|
|
28
26
|
className?: G.ClassName;
|
|
29
27
|
/** Additional attributes for the root element */
|
|
30
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;
|
|
31
31
|
};
|
|
@@ -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 */
|
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";
|
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-canary.
|
|
4
|
+
"version": "3.9.0-canary.18",
|
|
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.
|