reshaped 3.7.4 → 3.8.0-canary.1

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.
Files changed (110) hide show
  1. package/CHANGELOG-extra.md +3 -0
  2. package/CHANGELOG.md +68 -55
  3. package/LICENSE.md +1 -1
  4. package/README.md +24 -0
  5. package/dist/bundle.css +1 -1
  6. package/dist/bundle.js +11 -11
  7. package/dist/cjs/themes/index.d.ts +1 -0
  8. package/dist/cjs/themes/index.js +3 -1
  9. package/dist/components/Accordion/Accordion.types.d.ts +13 -2
  10. package/dist/components/ActionBar/ActionBar.types.d.ts +10 -0
  11. package/dist/components/Actionable/Actionable.types.d.ts +14 -0
  12. package/dist/components/Alert/Alert.types.d.ts +11 -0
  13. package/dist/components/Autocomplete/Autocomplete.types.d.ts +7 -0
  14. package/dist/components/Avatar/Avatar.types.d.ts +18 -0
  15. package/dist/components/Avatar/tests/Avatar.stories.js +1 -1
  16. package/dist/components/Badge/Badge.types.d.ts +25 -1
  17. package/dist/components/Badge/tests/Badge.test.stories.js +3 -1
  18. package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +11 -0
  19. package/dist/components/Button/Button.types.d.ts +20 -0
  20. package/dist/components/Calendar/Calendar.types.d.ts +31 -0
  21. package/dist/components/Calendar/tests/Calendar.stories.js +1 -1
  22. package/dist/components/Card/Card.types.d.ts +12 -0
  23. package/dist/components/Carousel/Carousel.types.d.ts +13 -0
  24. package/dist/components/Checkbox/Checkbox.types.d.ts +19 -0
  25. package/dist/components/Checkbox/tests/Checkbox.stories.js +1 -1
  26. package/dist/components/CheckboxGroup/CheckboxGroup.types.d.ts +10 -0
  27. package/dist/components/Container/Container.types.d.ts +11 -1
  28. package/dist/components/Dismissible/Dismissible.types.d.ts +10 -0
  29. package/dist/components/Divider/Divider.types.d.ts +6 -0
  30. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +4 -1
  31. package/dist/components/FileUpload/FileUpload.types.d.ts +10 -0
  32. package/dist/components/Flyout/Flyout.types.d.ts +41 -0
  33. package/dist/components/Flyout/FlyoutContent.js +1 -1
  34. package/dist/components/Flyout/FlyoutControlled.js +2 -1
  35. package/dist/components/Flyout/tests/Flyout.stories.d.ts +4 -0
  36. package/dist/components/Flyout/tests/Flyout.stories.js +59 -1
  37. package/dist/components/Flyout/useFlyout.d.ts +1 -0
  38. package/dist/components/Flyout/useFlyout.js +3 -1
  39. package/dist/components/Flyout/utilities/calculatePosition.d.ts +1 -1
  40. package/dist/components/Flyout/utilities/calculatePosition.js +52 -28
  41. package/dist/components/Flyout/utilities/flyout.js +22 -18
  42. package/dist/components/Flyout/utilities/helpers.d.ts +7 -0
  43. package/dist/components/Flyout/utilities/helpers.js +14 -0
  44. package/dist/components/Flyout/utilities/isFullyVisible.d.ts +5 -1
  45. package/dist/components/Flyout/utilities/isFullyVisible.js +1 -1
  46. package/dist/components/FormControl/FormControl.types.d.ts +9 -0
  47. package/dist/components/Grid/Grid.js +3 -1
  48. package/dist/components/Grid/Grid.module.css +1 -1
  49. package/dist/components/Grid/Grid.types.d.ts +31 -0
  50. package/dist/components/Grid/tests/Grid.stories.d.ts +3 -0
  51. package/dist/components/Grid/tests/Grid.stories.js +39 -1
  52. package/dist/components/Hidden/Hidden.types.d.ts +4 -0
  53. package/dist/components/HiddenVisually/HiddenVisually.types.d.ts +1 -0
  54. package/dist/components/Hotkey/Hotkey.types.d.ts +4 -0
  55. package/dist/components/Icon/Icon.types.d.ts +6 -0
  56. package/dist/components/Image/Image.types.d.ts +15 -0
  57. package/dist/components/Link/Link.types.d.ts +7 -0
  58. package/dist/components/Loader/Loader.types.d.ts +5 -0
  59. package/dist/components/MenuItem/MenuItem.types.d.ts +13 -1
  60. package/dist/components/Modal/Modal.types.d.ts +19 -0
  61. package/dist/components/NumberField/NumberField.types.d.ts +10 -0
  62. package/dist/components/Overlay/Overlay.types.d.ts +13 -0
  63. package/dist/components/Pagination/Pagination.types.d.ts +11 -29
  64. package/dist/components/PinField/PinField.module.css +1 -1
  65. package/dist/components/PinField/PinField.types.d.ts +13 -0
  66. package/dist/components/PinField/tests/PinField.stories.d.ts +24 -3
  67. package/dist/components/PinField/tests/PinField.stories.js +194 -47
  68. package/dist/components/Popover/Popover.types.d.ts +4 -1
  69. package/dist/components/Progress/Progress.types.d.ts +9 -0
  70. package/dist/components/ProgressIndicator/ProgressIndicator.js +13 -84
  71. package/dist/components/ProgressIndicator/ProgressIndicator.module.css +1 -1
  72. package/dist/components/ProgressIndicator/ProgressIndicator.types.d.ts +8 -0
  73. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +8 -1
  74. package/dist/components/Radio/Radio.types.d.ts +12 -0
  75. package/dist/components/RadioGroup/RadioGroup.types.d.ts +14 -0
  76. package/dist/components/Reshaped/Reshaped.css +1 -1
  77. package/dist/components/Reshaped/Reshaped.types.d.ts +12 -0
  78. package/dist/components/Resizable/Resizable.types.d.ts +7 -0
  79. package/dist/components/Scrim/Scrim.types.d.ts +6 -1
  80. package/dist/components/ScrollArea/ScrollArea.types.d.ts +7 -0
  81. package/dist/components/Select/Select.types.d.ts +27 -0
  82. package/dist/components/Skeleton/Skeleton.types.d.ts +2 -0
  83. package/dist/components/Slider/Slider.types.d.ts +56 -0
  84. package/dist/components/Stepper/Stepper.types.d.ts +13 -0
  85. package/dist/components/Switch/Switch.types.d.ts +16 -0
  86. package/dist/components/Table/Table.types.d.ts +29 -0
  87. package/dist/components/Tabs/Tabs.module.css +1 -1
  88. package/dist/components/Tabs/Tabs.types.d.ts +24 -0
  89. package/dist/components/Tabs/TabsItem.js +2 -2
  90. package/dist/components/Tabs/tests/Tabs.stories.js +6 -6
  91. package/dist/components/Text/Text.types.d.ts +12 -0
  92. package/dist/components/TextArea/TextArea.types.d.ts +17 -0
  93. package/dist/components/TextField/TextField.types.d.ts +29 -0
  94. package/dist/components/Theme/Theme.js +4 -1
  95. package/dist/components/Theme/Theme.types.d.ts +5 -0
  96. package/dist/components/Timeline/Timeline.types.d.ts +7 -0
  97. package/dist/components/Toast/Toast.types.d.ts +18 -0
  98. package/dist/components/ToggleButton/ToggleButton.types.d.ts +9 -0
  99. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts +8 -0
  100. package/dist/components/Tooltip/Tooltip.types.d.ts +5 -0
  101. package/dist/components/View/View.types.d.ts +56 -1
  102. package/dist/components/_private/Aligner/Aligner.types.d.ts +6 -0
  103. package/dist/themes/index.d.ts +1 -0
  104. package/dist/themes/index.js +1 -0
  105. package/package.json +47 -32
  106. package/LICENSE-SOURCE.md +0 -40
  107. package/dist/components/Grid/tests/Grid.test.stories.d.ts +0 -23
  108. package/dist/components/Grid/tests/Grid.test.stories.js +0 -42
  109. package/dist/components/PinField/tests/PinField.test.stories.d.ts +0 -29
  110. package/dist/components/PinField/tests/PinField.test.stories.js +0 -177
@@ -45,7 +45,10 @@ export const PrivateTheme = (props) => {
45
45
  return;
46
46
  const themeRootEl = getRootThemeEl(scopeRef?.current);
47
47
  const hasColorModeApplied = themeRootEl.getAttribute("data-rs-color-mode");
48
- themeRootEl.setAttribute("data-rs-theme", getThemeAttribute(usedTheme));
48
+ const themeAttribute = getThemeAttribute(usedTheme);
49
+ // Checking in case there is no global theme applied
50
+ if (themeAttribute)
51
+ themeRootEl.setAttribute("data-rs-theme", themeAttribute);
49
52
  if (!hasColorModeApplied)
50
53
  themeRootEl.setAttribute("data-rs-color-mode", usedColorMode);
51
54
  return () => {
@@ -13,10 +13,15 @@ export type ThemeContextData = {
13
13
  setRootTheme: (theme: G.Theme) => void;
14
14
  };
15
15
  export type Props = {
16
+ /** Name of the theme to use, enables controlled mode */
16
17
  name?: G.Theme;
18
+ /** Default name of the theme to use, enables uncontrolled mode */
17
19
  defaultName?: G.Theme;
20
+ /** Color mode to use */
18
21
  colorMode?: G.ColorMode | "inverted";
22
+ /** Additional classname for the root element */
19
23
  className?: G.ClassName;
24
+ /** Node for inserting children */
20
25
  children?: React.ReactNode;
21
26
  };
22
27
  export type PrivateProps = Props & {
@@ -1,13 +1,20 @@
1
1
  import type React from "react";
2
2
  import type * as G from "../../types/global";
3
3
  export type Props = {
4
+ /** Node for inserting children */
4
5
  children?: React.ReactNode;
6
+ /** Additional classname for the root element */
5
7
  className?: G.ClassName;
8
+ /** Additional attributes for the root element */
6
9
  attributes?: G.Attributes<"ul">;
7
10
  };
8
11
  export type ItemProps = {
12
+ /** Node for rendering custom item markers */
9
13
  markerSlot?: React.ReactNode | null;
14
+ /** Node for inserting children */
10
15
  children?: React.ReactNode;
16
+ /** Additional classname for the item element */
11
17
  className?: G.ClassName;
18
+ /** Additional attributes for the item element */
12
19
  attributes?: G.Attributes<"li">;
13
20
  };
@@ -6,21 +6,39 @@ export type TimeoutAlias = "short" | "long";
6
6
  export type Timeout = TimeoutAlias | number;
7
7
  export type Position = "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
8
8
  export type Props = {
9
+ /** Component size
10
+ * @default "small"
11
+ */
9
12
  size?: "small" | "medium" | "large";
13
+ /** Icon at the inline start position of the toast */
10
14
  icon?: IconProps["svg"];
15
+ /** Node for inserting content at the inline start position of the toast */
11
16
  startSlot?: React.ReactNode;
17
+ /** Title value for the toast */
12
18
  title?: React.ReactNode;
19
+ /** Text content for the toast */
13
20
  text?: React.ReactNode;
21
+ /** Node for inserting children */
14
22
  children?: React.ReactNode;
23
+ /** Node for inserting content after the toast actions */
15
24
  actionsSlot?: React.ReactNode;
25
+ /** Color of the toast
26
+ * @default "inverted"
27
+ */
16
28
  color?: "neutral" | "primary" | "critical" | "positive" | "warning" | "inverted";
29
+ /** Additional classname for the root element */
17
30
  className?: G.ClassName;
31
+ /** Additional attributes for the root element */
18
32
  attributes?: G.Attributes<"div">;
19
33
  };
20
34
  export type ProviderProps = {
35
+ /** Node for inserting children */
21
36
  children?: React.ReactNode;
37
+ /** Options for the toast */
22
38
  options?: Partial<Record<RegionProps["position"], {
39
+ /** Width of the toasts rendered inside the region */
23
40
  width?: string;
41
+ /** Always render the toast stack as expanded inside the region */
24
42
  expanded?: boolean;
25
43
  }>>;
26
44
  };
@@ -1,7 +1,12 @@
1
1
  import type { ButtonProps } from "../Button";
2
2
  type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
3
+ /** Component render variant
4
+ * @default "outline"
5
+ */
3
6
  variant?: Extract<ButtonProps["variant"], "outline" | "ghost">;
7
+ /** Value of the toggle button, enables controlled mode for the ToggleButtonGroup */
4
8
  value?: string;
9
+ /** Callback when the toggle button value changes */
5
10
  onChange?: (args: {
6
11
  checked: boolean;
7
12
  value: string;
@@ -9,11 +14,15 @@ type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
9
14
  }) => void;
10
15
  };
11
16
  export type ControlledProps = BaseProps & {
17
+ /** Default value of the toggle button, enables uncontrolled mode */
12
18
  defaultChecked?: never;
19
+ /** Value of the toggle button, enables controlled mode */
13
20
  checked: boolean;
14
21
  };
15
22
  export type UncontrolledProps = BaseProps & {
23
+ /** Default value of the toggle button, enables uncontrolled mode */
16
24
  defaultChecked?: boolean;
25
+ /** Value of the toggle button, enables controlled mode */
17
26
  checked?: never;
18
27
  };
19
28
  export type Props = ControlledProps | UncontrolledProps;
@@ -2,18 +2,26 @@ import type React from "react";
2
2
  import type { ButtonGroupProps } from "../Button";
3
3
  import type { ToggleButtonProps } from "../ToggleButton";
4
4
  type BaseProps = {
5
+ /** Selection mode for the toggle button group
6
+ * @default "single"
7
+ */
5
8
  selectionMode?: "single" | "multiple";
9
+ /** Callback when the toggle button group value changes */
6
10
  onChange?: (args: {
7
11
  value: string[];
8
12
  event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
9
13
  }) => void;
10
14
  } & ButtonGroupProps;
11
15
  export type ControlledProps = BaseProps & {
16
+ /** Selected values in the group, enables controlled mode */
12
17
  value: string[];
18
+ /** Default selected values in the group, enables uncontrolled mode */
13
19
  defaultValue?: never;
14
20
  };
15
21
  export type UncontrolledProps = BaseProps & {
22
+ /** Selected values in the group, enables controlled mode */
16
23
  value?: never;
24
+ /** Default selected values in the group, enables uncontrolled mode */
17
25
  defaultValue?: string[];
18
26
  };
19
27
  export type Props = ControlledProps | UncontrolledProps;
@@ -1,7 +1,12 @@
1
1
  import React from "react";
2
2
  import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
3
3
  export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
4
+ /** Node for inserting children */
4
5
  children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
6
+ /** Text content for the tooltip */
5
7
  text?: React.ReactNode;
8
+ /** Color of the tooltip
9
+ * @default "inverted"
10
+ */
6
11
  color?: "inverted" | "dark";
7
12
  };
@@ -4,62 +4,117 @@ import type * as TStyles from "../../styles/types";
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
6
  export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
7
+ /** Node for inserting the content */
7
8
  children?: React.ReactNode;
9
+ /** Render as a different element */
8
10
  as?: TagName;
11
+ /** Render a divider between each child */
9
12
  divided?: boolean;
13
+ /** Flex direction for the content */
10
14
  direction?: G.Responsive<Direction>;
15
+ /** Gap between children, base unit token number multiplier */
11
16
  gap?: G.Responsive<number>;
17
+ /** Flex wrap for the content */
12
18
  wrap?: G.Responsive<boolean>;
19
+ /** Flex align-items for the content */
13
20
  align?: G.Responsive<TStyles.Align>;
21
+ /** Flex justify-content for the content */
14
22
  justify?: G.Responsive<TStyles.Justify>;
23
+ /** Height style, literal string value or a base unit token number multiplier */
15
24
  height?: G.Responsive<string | number>;
25
+ /** Width style, literal string value or a base unit token number multiplier */
16
26
  width?: G.Responsive<string | number>;
27
+ /** Aspect ratio style, represented as width / height */
17
28
  aspectRatio?: G.Responsive<number>;
29
+ /** Maximum height style, literal string value or a base unit token number multiplier */
18
30
  maxHeight?: G.Responsive<string | number>;
31
+ /** Maximum width style, literal string value or a base unit token number multiplier */
19
32
  maxWidth?: G.Responsive<string | number>;
33
+ /** Minimum height style, literal string value or a base unit token number multiplier */
20
34
  minHeight?: G.Responsive<string | number>;
35
+ /** Minimum width style, literal string value or a base unit token number multiplier */
21
36
  minWidth?: G.Responsive<string | number>;
37
+ /** Padding style for all sides, base unit token number multiplier */
22
38
  padding?: G.Responsive<number>;
39
+ /** Padding top, base unit token number multiplier */
23
40
  paddingTop?: G.Responsive<number>;
41
+ /** Padding bottom, base unit token number multiplier */
24
42
  paddingBottom?: G.Responsive<number>;
43
+ /** Padding inline start, base unit token number multiplier */
25
44
  paddingStart?: G.Responsive<number>;
45
+ /** Padding inline end, base unit token number multiplier */
26
46
  paddingEnd?: G.Responsive<number>;
47
+ /** Padding inline, base unit token number multiplier */
27
48
  paddingInline?: G.Responsive<number>;
49
+ /** Padding block, base unit token number multiplier */
28
50
  paddingBlock?: G.Responsive<number>;
51
+ /** Apply negative margin and remove side borders, base unit token number multiplier */
29
52
  bleed?: G.Responsive<number>;
53
+ /** Text align for the content */
30
54
  textAlign?: G.Responsive<TStyles.TextAlign>;
55
+ /** Background color, based on the color tokens */
31
56
  backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
57
+ /** Border color, based on the color tokens */
32
58
  borderColor?: G.Responsive<TStyles.BorderColor>;
59
+ /** Add border to all sides */
33
60
  border?: G.Responsive<TStyles.Border>;
61
+ /** Add border to the top side */
34
62
  borderTop?: G.Responsive<TStyles.Border>;
63
+ /** Add border to the bottom side */
35
64
  borderBottom?: G.Responsive<TStyles.Border>;
65
+ /** Add border to the inline start side */
36
66
  borderStart?: G.Responsive<TStyles.Border>;
67
+ /** Add border to the inline end side */
37
68
  borderEnd?: G.Responsive<TStyles.Border>;
69
+ /** Add border to the inline direction */
38
70
  borderInline?: G.Responsive<TStyles.Border>;
71
+ /** Add border to the block direction */
39
72
  borderBlock?: G.Responsive<TStyles.Border>;
73
+ /** Border radius, based on the radius tokens */
40
74
  borderRadius?: G.Responsive<TStyles.Radius>;
75
+ /** Position style */
41
76
  position?: G.Responsive<TStyles.Position>;
77
+ /** Inset style, base unit token number multiplier when used as a number */
42
78
  inset?: G.Responsive<TStyles.Inset>;
79
+ /** Inset start, base unit token number multiplier when used as a number */
43
80
  insetStart?: G.Responsive<TStyles.Inset>;
81
+ /** Inset end, base unit token number multiplier when used as a number */
44
82
  insetEnd?: G.Responsive<TStyles.Inset>;
83
+ /** Inset top, base unit token number multiplier when used as a number */
45
84
  insetTop?: G.Responsive<TStyles.Inset>;
85
+ /** Inset bottom, base unit token number multiplier when used as a number */
46
86
  insetBottom?: G.Responsive<TStyles.Inset>;
87
+ /** z-index style */
47
88
  zIndex?: number;
48
- shadow?: "raised" | "overlay";
89
+ /** Shadow style, based on the shadow tokens */
90
+ shadow?: "raised" | "overlay" | "inset";
91
+ /** Overflow style */
49
92
  overflow?: "hidden" | "auto";
93
+ /** Add transition for the properties */
50
94
  animated?: boolean;
95
+ /** Additional classname for the root element */
51
96
  className?: G.ClassName;
97
+ /** Additional attributes for the root element */
52
98
  attributes?: G.Attributes<TagName>;
53
99
  } & Pick<ItemProps, "grow" | "shrink">;
54
100
  export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
101
+ /** Flex order of the item inside the parent */
55
102
  order?: G.Responsive<number>;
103
+ /** Number of columns the item should span in the parent, View uses 12 columns */
56
104
  columns?: G.Responsive<Columns>;
105
+ /** Apply flex-grow, using it on View.Item applies additional styles on the parent View */
57
106
  grow?: G.Responsive<boolean>;
107
+ /** Apply flex-shrink */
58
108
  shrink?: boolean;
109
+ /** Individual gap before the item, overrides the parent View gap */
59
110
  gapBefore?: G.Responsive<number> | "auto";
111
+ /** Render as a different element */
60
112
  as?: TagName;
113
+ /** Additional attributes for the root element */
61
114
  attributes?: G.Attributes<TagName>;
115
+ /** Additional classname for the root element */
62
116
  className?: G.ClassName;
117
+ /** Node for inserting the item content */
63
118
  children?: React.ReactNode;
64
119
  };
65
120
  export type RenderItem = (args: {
@@ -1,9 +1,15 @@
1
1
  import type * as G from "../../../types/global";
2
2
  type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
3
3
  export type Props = {
4
+ /** Node for inserting children components */
4
5
  children: React.ReactElement;
6
+ /** Side of the parent element to align the component with, applies negative margin on the chosen sides
7
+ * @default "all"
8
+ */
5
9
  side?: Side | Side[];
10
+ /** Additional classname for the root element */
6
11
  className?: G.ClassName;
12
+ /** Additional attributes for the root element */
7
13
  attributes?: G.Attributes<"div">;
8
14
  };
9
15
  export {};
@@ -19,4 +19,5 @@ export type { Name as ViewportTokenName } from "./_generator/tokens/viewport/vie
19
19
  */
20
20
  export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
21
21
  export { default as generateThemeColors } from "./_generator/tokens/color/utilities/generateColors";
22
+ export { default as transform } from "./_generator/transform";
22
23
  export declare const getThemeCSS: (name: string, definition: PassedThemeDefinition, options?: T.PublicOptions["themeOptions"]) => string;
@@ -4,6 +4,7 @@ import transform from "./_generator/transform.js";
4
4
  */
5
5
  export { default as baseThemeDefinition } from "./_generator/definitions/reshaped.js";
6
6
  export { default as generateThemeColors } from "./_generator/tokens/color/utilities/generateColors.js";
7
+ export { default as transform } from "./_generator/transform.js";
7
8
  export const getThemeCSS = (name, definition, options) => {
8
9
  const code = transform(name, definition, { themeOptions: options, isFragment: true });
9
10
  return code.variables;
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.7.4",
4
+ "version": "3.8.0-canary.1",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
@@ -18,8 +18,17 @@
18
18
  "accessibility",
19
19
  "accessible"
20
20
  ],
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "https://github.com/reshaped-ui/reshaped.git"
24
+ },
21
25
  "bugs": {
22
- "url": "https://github.com/formaat-design/reshaped/issues"
26
+ "url": "https://github.com/reshaped-ui/reshaped/issues"
27
+ },
28
+ "author": {
29
+ "name": "Dmitry Belyaev",
30
+ "email": "blv.dmitry@gmail.com",
31
+ "url": "https://reshaped.so"
23
32
  },
24
33
  "sideEffects": [
25
34
  "*.css"
@@ -63,28 +72,33 @@
63
72
  "scripts": {
64
73
  "dev": "storybook dev -p 3001 --disable-telemetry",
65
74
  "clean": "sh ./bin/clean.sh",
66
- "build": "yarn clean && yarn build:stories && yarn build:esm && yarn build:css && yarn build:cjs && yarn build:bundle",
75
+ "build": "pnpm clean && pnpm build:stories && pnpm build:esm && pnpm build:css && pnpm build:cjs && pnpm build:bundle",
67
76
  "build:themes": "node bin/cli.js theming --config dist/cjs/cli/theming/reshaped.config.js --output src/themes",
68
77
  "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
69
78
  "build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
70
79
  "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
71
80
  "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
72
81
  "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
73
- "build:size": "yarn clean && yarn build:esm && yarn build:bundle",
82
+ "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
74
83
  "build:storybook": "storybook build -o dist/app --disable-telemetry",
75
84
  "build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
76
- "release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
77
- "release:lib": "yarn build && yarn publish",
78
- "release:canary": "yarn build && yarn publish --tag canary",
79
- "release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
80
- "release:source": "sh ./bin/release-source.sh",
85
+ "changelog": "node bin/generate-changelog.js",
86
+ "version": "pnpm changelog && git add CHANGELOG.md",
87
+ "release": "node bin/release.js",
88
+ "release:patch": "node bin/release.js patch",
89
+ "release:minor": "node bin/release.js minor",
90
+ "release:major": "node bin/release.js major",
91
+ "release:lib": "pnpm build && pnpm publish",
92
+ "release:canary": "pnpm build && yarn publish --tag canary",
93
+ "release:test": "pnpm build && pnpm pack --filename reshaped-test.tgz",
81
94
  "release:copy": "sh ./bin/release-copy.sh",
82
95
  "chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
83
- "test:vrt": "yarn chromatic",
96
+ "test:vrt": "pnpm chromatic",
97
+ "test:vrt:turbo": "pnpm chromatic --only-changed",
84
98
  "test:browser": "vitest run --project=storybook",
85
99
  "test:unit": "vitest run --project=unit",
86
100
  "test:size": "size-limit",
87
- "lint": "yarn lint:js && yarn lint:css",
101
+ "lint": "pnpm lint:js && pnpm lint:css",
88
102
  "lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
89
103
  "lint:css": "stylelint 'src/**/*.css'",
90
104
  "commit": "git-cz"
@@ -96,32 +110,34 @@
96
110
  "@commitlint/cli": "19.8.1",
97
111
  "@commitlint/config-conventional": "19.8.1",
98
112
  "@commitlint/types": "19.8.1",
99
- "@eslint/js": "9.33.0",
113
+ "@eslint/js": "9.35.0",
100
114
  "@size-limit/preset-big-lib": "11.2.0",
101
- "@storybook/addon-a11y": "9.1.2",
102
- "@storybook/addon-docs": "9.1.2",
103
- "@storybook/addon-vitest": "9.1.2",
104
- "@storybook/react-vite": "9.1.2",
105
- "@types/culori": "4.0.0",
115
+ "@storybook/addon-a11y": "9.1.5",
116
+ "@storybook/addon-docs": "9.1.5",
117
+ "@storybook/addon-vitest": "9.1.5",
118
+ "@storybook/react": "9.1.5",
119
+ "@storybook/react-vite": "9.1.5",
120
+ "@testing-library/user-event": "14.6.1",
121
+ "@types/culori": "4.0.1",
106
122
  "@types/events": "3.0.3",
107
- "@types/node": "24.3.0",
108
- "@types/react": "19.1.10",
109
- "@types/react-dom": "19.1.7",
123
+ "@types/node": "24.3.3",
124
+ "@types/react": "19.1.13",
125
+ "@types/react-dom": "19.1.9",
110
126
  "@vitejs/plugin-react": "4.6.0",
111
127
  "@vitest/browser": "3.2.4",
112
128
  "@vitest/coverage-istanbul": "3.2.4",
113
129
  "@vitest/coverage-v8": "3.2.4",
114
- "chromatic": "13.1.3",
130
+ "chromatic": "13.1.4",
115
131
  "conventional-changelog-cli": "5.0.0",
116
132
  "cz-conventional-changelog": "3.3.0",
117
- "eslint": "9.33.0",
133
+ "eslint": "9.35.0",
118
134
  "eslint-config-prettier": "10.1.8",
119
135
  "eslint-plugin-jsx-a11y": "6.10.2",
120
136
  "eslint-plugin-prettier": "5.5.4",
121
137
  "eslint-plugin-react": "7.37.5",
122
138
  "eslint-plugin-react-hooks": "5.2.0",
123
- "lefthook": "1.12.3",
124
- "playwright": "1.54.2",
139
+ "lefthook": "1.13.0",
140
+ "playwright": "1.55.0",
125
141
  "postcss": "8.5.6",
126
142
  "postcss-cli": "11.0.1",
127
143
  "postcss-each": "1.1.0",
@@ -132,14 +148,14 @@
132
148
  "react-shadow": "20.6.0",
133
149
  "resolve-tspaths": "0.8.23",
134
150
  "size-limit": "11.2.0",
135
- "storybook": "9.1.2",
136
- "stylelint": "16.23.1",
151
+ "storybook": "9.1.5",
152
+ "stylelint": "16.24.0",
137
153
  "stylelint-config-prettier": "9.0.5",
138
154
  "stylelint-config-standard": "39.0.0",
139
155
  "ts-node": "10.9.2",
140
156
  "typescript": "5.9.2",
141
- "typescript-eslint": "8.39.1",
142
- "vite": "7.1.2",
157
+ "typescript-eslint": "8.43.0",
158
+ "vite": "7.1.5",
143
159
  "vite-tsconfig-paths": "5.1.4",
144
160
  "vitest": "3.2.4",
145
161
  "vitest-browser-react": "1.0.1"
@@ -150,10 +166,10 @@
150
166
  "react-dom": "^18 || ^19"
151
167
  },
152
168
  "dependencies": {
153
- "@csstools/postcss-global-data": "3.0.0",
169
+ "@csstools/postcss-global-data": "3.1.0",
154
170
  "chalk": "4.1.2",
155
- "commander": "14.0.0",
156
- "cssnano": "7.1.0",
171
+ "commander": "14.0.1",
172
+ "cssnano": "7.1.1",
157
173
  "csstype": "3.1.3",
158
174
  "culori": "4.0.2",
159
175
  "postcss-custom-media": "11.0.6"
@@ -181,7 +197,6 @@
181
197
  }
182
198
  ],
183
199
  "engines": {
184
- "yarn": ">=1.0.0",
185
200
  "node": ">=22"
186
201
  }
187
202
  }
package/LICENSE-SOURCE.md DELETED
@@ -1,40 +0,0 @@
1
- # Reshaped Pro License
2
-
3
- Reshaped grants you a non-exclusive license and permission to use the Design system.
4
- When using the Reshaped Pro License it grants the same permissions to all Employees and Contractors of the Licensee to access and use the Design system.
5
-
6
- Reshaped Pro license is only including the Design system source code.
7
- Reshaped package publicly distributed on NPM is using a separate MIT license and is provided together with the package when it's installed.
8
-
9
- You can:
10
-
11
- - Modify the Design system components to create custom components. Those components are subject to this license.
12
- - Use the Design system to create unlimited Products for yourself, your company or a Client.
13
- - Sell products created with the Design system to the Users.
14
-
15
- You cannot:
16
-
17
- - Share your access to the Design system with other people.
18
- - Redistribute the Design System under other names.
19
- - Reimplement the Design System using other frameworks and make it available publicly or for sale.
20
- - Distribute design kits based on the Design system.
21
- - Distribute design or development tools for building Products using the Design system components.
22
- - Distribute page templates or UI libraries based on the Design system.
23
- - Create any Product that is not the sole property of either you, your company or a Client. For example your Employees and Contractors can't use your company Reshaped Pro license to build their own websites or side projects.
24
-
25
- ## License Definitions
26
-
27
- - Licensee is a person or a business entity who has purchased a License.
28
- - Design system is the source code and design assets made available to the Licensee after purchasing an Reshaped license.
29
- - Product is any artifact produced that incorporates the Design system.
30
- - User is a user of a Product.
31
- - Employee is a full-time or part-time employee of the Licensee.
32
- - Contractor is an individual or business entity contracted to perform services for the Licensee.
33
- - Client is an individual or entity receiving custom professional services directly from the Licensee, produced specifically for that individual or entity.
34
-
35
- The ownership of the Design system remains with the Reshaped development team.
36
- You are required to abide by the licensing terms to avoid termination in case of non-compliance with the agreed terms.
37
-
38
- ---
39
-
40
- Got any further questions? [Send us an email](mailto:hello@reshaped.so)
@@ -1,23 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- component: {
5
- <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
6
- Item: {
7
- <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>): import("react").JSX.Element;
8
- displayName: string;
9
- };
10
- displayName: string;
11
- };
12
- parameters: {
13
- iframe: {
14
- url: string;
15
- };
16
- chromatic: {
17
- disableSnapshot: boolean;
18
- };
19
- };
20
- };
21
- export default _default;
22
- export declare const as: StoryObj;
23
- export declare const className: StoryObj;
@@ -1,42 +0,0 @@
1
- import { expect } from "storybook/test";
2
- import Grid from "../index.js";
3
- export default {
4
- title: "Utility components/Grid/tests",
5
- component: Grid,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/utilities/grid",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const as = {
14
- name: "as",
15
- render: () => (<Grid as="ul">
16
- <Grid.Item as="li">Content</Grid.Item>
17
- </Grid>),
18
- play: ({ canvas }) => {
19
- const ul = canvas.getByRole("list");
20
- const li = canvas.getByRole("listitem");
21
- expect(ul).toBeInTheDocument();
22
- expect(li).toBeInTheDocument();
23
- },
24
- };
25
- export const className = {
26
- name: "className, attributes",
27
- render: () => (<div data-testid="root">
28
- <Grid className="test-class" attributes={{ id: "test-id" }}>
29
- <Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
30
- Content
31
- </Grid.Item>
32
- </Grid>
33
- </div>),
34
- play: async ({ canvas }) => {
35
- const root = canvas.getByTestId("root").firstChild;
36
- const item = root?.firstChild;
37
- expect(root).toHaveAttribute("id", "test-id");
38
- expect(root).toHaveClass("test-class");
39
- expect(item).toHaveAttribute("id", "test-item-id");
40
- expect(item).toHaveClass("test-item-class");
41
- },
42
- };
@@ -1,29 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- import { fn } from "storybook/test";
3
- declare const _default: {
4
- title: string;
5
- component: import("react").FC<import("./..").PinFieldProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- chromatic: {
11
- disableSnapshot: boolean;
12
- };
13
- };
14
- };
15
- export default _default;
16
- export declare const render: StoryObj;
17
- export declare const valueLength: StoryObj;
18
- export declare const defaultValue: StoryObj<{
19
- handleChange?: ReturnType<typeof fn>;
20
- }>;
21
- export declare const value: StoryObj<{
22
- handleChange?: ReturnType<typeof fn>;
23
- }>;
24
- export declare const pattern: StoryObj<{
25
- handleChange?: ReturnType<typeof fn>;
26
- }>;
27
- export declare const formControl: StoryObj;
28
- export declare const keyboard: StoryObj;
29
- export declare const className: StoryObj;