@teamturing/react-kit 2.42.2 → 2.43.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.
Files changed (4) hide show
  1. package/dist/core/Grid/index.d.ts +8 -0
  2. package/dist/index.js +25 -10
  3. package/esm/core/Grid/index.js +25 -10
  4. package/package.json +3 -3
package/dist/core/Grid/index.d.ts CHANGED
@@ -7,6 +7,10 @@ type Props = {
7
7
  gapX?: ResponsiveValue<SpaceKey>;
8
8
  gapY?: ResponsiveValue<SpaceKey>;
9
9
  wrap?: ResponsiveValue<boolean>;
10
+ /**
11
+ * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
12
+ */
13
+ layout?: boolean;
10
14
  } & Pick<ViewProps, 'alignItems' | 'justifyContent' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'> & AsProp;
11
15
  type UnitSizeType = 'min' | 'max' | number;
12
16
  type GridUnitProps = {
@@ -16,6 +20,10 @@ declare const _default: import("react").ForwardRefExoticComponent<{
16
20
  gapX?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
17
21
  gapY?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
18
22
  wrap?: ResponsiveValue<boolean> | undefined;
23
+ /**
24
+ * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
25
+ */
26
+ layout?: boolean | undefined;
19
27
  } & Pick<ViewProps, "alignItems" | "justifyContent" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className"> & AsProp & {
20
28
  children?: import("react").ReactNode;
21
29
  } & import("react").RefAttributes<HTMLDivElement>> & {
package/dist/index.js CHANGED
@@ -6675,28 +6675,43 @@ const BaseGrid = styled__default.default(View)({
6675
6675
  display: 'flex',
6676
6676
  flexDirection: 'row'
6677
6677
  }, ({
6678
- theme
6678
+ theme,
6679
+ layout
6679
6680
  }) => variant({
6680
6681
  prop: 'gapX',
6681
6682
  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
6682
6683
  const styleValue = {
6683
- '& > *': {
6684
- px: forcePixelValue(value / 2)
6685
- },
6686
- 'mx': forcePixelValue(-value / 2)
6684
+ ...(layout ? {
6685
+ '& > *': {
6686
+ pl: forcePixelValue(value)
6687
+ },
6688
+ 'ml': forcePixelValue(-value)
6689
+ } : {
6690
+ '& > *': {
6691
+ px: forcePixelValue(value / 2)
6692
+ },
6693
+ 'mx': forcePixelValue(-value / 2)
6694
+ })
6687
6695
  };
6688
6696
  return [key, styleValue];
6689
6697
  }))
6690
6698
  }), ({
6691
- theme
6699
+ theme,
6700
+ layout
6692
6701
  }) => variant({
6693
6702
  prop: 'gapY',
6694
6703
  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
6695
6704
  const styleValue = {
6696
- '& > *': {
6697
- mt: forcePixelValue(value)
6698
- },
6699
- 'mt': forcePixelValue(-value)
6705
+ ...(layout ? {
6706
+ '& > *': {
6707
+ pt: forcePixelValue(value)
6708
+ }
6709
+ } : {
6710
+ '& > *': {
6711
+ mt: forcePixelValue(value)
6712
+ }
6713
+ }),
6714
+ mt: forcePixelValue(-value)
6700
6715
  };
6701
6716
  return [key, styleValue];
6702
6717
  }))
package/esm/core/Grid/index.js CHANGED
@@ -31,28 +31,43 @@ const BaseGrid = styled(View)({
31
31
  display: 'flex',
32
32
  flexDirection: 'row'
33
33
  }, ({
34
- theme
34
+ theme,
35
+ layout
35
36
  }) => variant({
36
37
  prop: 'gapX',
37
38
  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
38
39
  const styleValue = {
39
- '& > *': {
40
- px: forcePixelValue(value / 2)
41
- },
42
- 'mx': forcePixelValue(-value / 2)
40
+ ...(layout ? {
41
+ '& > *': {
42
+ pl: forcePixelValue(value)
43
+ },
44
+ 'ml': forcePixelValue(-value)
45
+ } : {
46
+ '& > *': {
47
+ px: forcePixelValue(value / 2)
48
+ },
49
+ 'mx': forcePixelValue(-value / 2)
50
+ })
43
51
  };
44
52
  return [key, styleValue];
45
53
  }))
46
54
  }), ({
47
- theme
55
+ theme,
56
+ layout
48
57
  }) => variant({
49
58
  prop: 'gapY',
50
59
  variants: Object.fromEntries(Object.entries(theme.space).map(([key, value]) => {
51
60
  const styleValue = {
52
- '& > *': {
53
- mt: forcePixelValue(value)
54
- },
55
- 'mt': forcePixelValue(-value)
61
+ ...(layout ? {
62
+ '& > *': {
63
+ pt: forcePixelValue(value)
64
+ }
65
+ } : {
66
+ '& > *': {
67
+ mt: forcePixelValue(value)
68
+ }
69
+ }),
70
+ mt: forcePixelValue(-value)
56
71
  };
57
72
  return [key, styleValue];
58
73
  }))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.42.2",
3
+ "version": "2.43.0",
4
4
  "description": "React components, hooks for create teamturing web application",
5
5
  "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
6
6
  "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,7 +55,7 @@
55
55
  "dependencies": {
56
56
  "@floating-ui/react-dom": "^2.0.2",
57
57
  "@primer/behaviors": "^1.3.6",
58
- "@teamturing/icons": "^1.48.0",
58
+ "@teamturing/icons": "^1.49.0",
59
59
  "@teamturing/token-studio": "^1.10.0",
60
60
  "@teamturing/utils": "^1.4.0",
61
61
  "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
66
66
  "react-textarea-autosize": "^8.5.3",
67
67
  "styled-system": "^5.1.5"
68
68
  },
69
- "gitHead": "5e8126c2434986024f3e44d22f4a0cb09da3798b"
69
+ "gitHead": "fd291bb6d5c2c386e234fd12e3fbf3955621aa74"
70
70
  }