@teamturing/react-kit 2.1.0 → 2.2.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.
@@ -274,7 +274,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
274
274
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
275
275
  } & {
276
276
  typography?: import("styled-system").ResponsiveValue<"s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
277
- } & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
277
+ } & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
278
278
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
279
279
  }, Props>>;
280
280
  export default GradientText;
package/dist/index.d.ts CHANGED
@@ -48,3 +48,7 @@ export { default as useToggleHandler } from './hook/useToggleHandler';
48
48
  * theme
49
49
  */
50
50
  export { default as theme } from './theme';
51
+ /**
52
+ * styled-system utils
53
+ */
54
+ export * from './utils/styled-system';
package/dist/index.js CHANGED
@@ -273,10 +273,6 @@ const surfaceElevation = {
273
273
  const shadowElevation = {
274
274
  'shadow/overlay': shadow$1.shadowMedium
275
275
  };
276
- ({
277
- ...surfaceElevation,
278
- ...shadowElevation
279
- });
280
276
 
281
277
  const colorStopList = {
282
278
  colorStopListVioletPink: '#8E6CF0, #CF75F3',
@@ -1736,6 +1732,12 @@ const wordBreak = system({
1736
1732
  scale: 'wordBreak'
1737
1733
  }
1738
1734
  });
1735
+ const lineClamp = system({
1736
+ lineClamp: {
1737
+ property: 'WebkitLineClamp',
1738
+ scale: 'WebkitLineClamp'
1739
+ }
1740
+ });
1739
1741
 
1740
1742
  const View = styled__default.default.div`
1741
1743
  ${compose(layout, color, flexbox, background, border, position, shadow)}
@@ -4020,7 +4022,7 @@ const theme = {
4020
4022
  radii,
4021
4023
  colors: {
4022
4024
  ...color$1,
4023
- surfaceElevation
4025
+ ...surfaceElevation
4024
4026
  },
4025
4027
  gradients: gradient,
4026
4028
  shadows: {
@@ -4678,9 +4680,14 @@ exports.Text = Text;
4678
4680
  exports.ThemeProvider = ThemeProvider;
4679
4681
  exports.UnstyledButton = UnstyledButton;
4680
4682
  exports.View = View;
4683
+ exports.lineClamp = lineClamp;
4684
+ exports.sx = sx;
4685
+ exports.textDecoration = textDecoration;
4681
4686
  exports.theme = theme;
4682
4687
  exports.useDevice = useDevice;
4683
4688
  exports.useOutsideClick = useOutsideClick;
4684
4689
  exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;
4685
4690
  exports.useResize = useResize;
4686
4691
  exports.useToggleHandler = useToggleHandler;
4692
+ exports.whiteSpace = whiteSpace;
4693
+ exports.wordBreak = wordBreak;
@@ -85,10 +85,8 @@ declare const theme: {
85
85
  readonly full: number;
86
86
  };
87
87
  colors: {
88
- surfaceElevation: {
89
- readonly surface: "#FFFFFF";
90
- readonly 'surface/overlay': "#FFFFFF";
91
- };
88
+ surface: "#FFFFFF";
89
+ 'surface/overlay': "#FFFFFF";
92
90
  'scale/violet/0': "#F3EFFD";
93
91
  'scale/violet/1': "#E8E1FB";
94
92
  'scale/violet/2': "#D9CDF9";
@@ -27,5 +27,9 @@ type WordBreakProps<ThemeType extends Theme = RequiredTheme> = {
27
27
  wordBreak?: ResponsiveValue<CSS.Property.WordBreak, ThemeType> | undefined;
28
28
  };
29
29
  declare const wordBreak: import("styled-system").styleFn;
30
- export { sx, textDecoration, whiteSpace, wordBreak };
31
- export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps };
30
+ type LineClampProps<ThemeType extends Theme = RequiredTheme> = {
31
+ lineClamp?: ResponsiveValue<CSS.Property.LineClamp, ThemeType> | undefined;
32
+ };
33
+ declare const lineClamp: import("styled-system").styleFn;
34
+ export { sx, textDecoration, whiteSpace, wordBreak, lineClamp };
35
+ export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps };
@@ -1,5 +1,4 @@
1
1
  import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import '../../packages/token-studio/esm/token/elevation/index.js';
3
2
  import radii from '../../packages/token-studio/esm/token/radii/index.js';
4
3
  import typography from '../../packages/token-studio/esm/token/typography/index.js';
5
4
  import { forwardRef } from 'react';
@@ -1,5 +1,4 @@
1
1
  import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import '../../packages/token-studio/esm/token/elevation/index.js';
3
2
  import radii from '../../packages/token-studio/esm/token/radii/index.js';
4
3
  import typography from '../../packages/token-studio/esm/token/typography/index.js';
5
4
  import styled from 'styled-components';
@@ -1,4 +1,3 @@
1
- import '../../packages/token-studio/esm/token/elevation/index.js';
2
1
  import space from '../../packages/token-studio/esm/token/space/index.js';
3
2
  import '../../packages/token-studio/esm/token/typography/index.js';
4
3
  import { forwardRef } from 'react';
@@ -1,5 +1,4 @@
1
1
  import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import '../../packages/token-studio/esm/token/elevation/index.js';
3
2
  import radii from '../../packages/token-studio/esm/token/radii/index.js';
4
3
  import '../../packages/token-studio/esm/token/typography/index.js';
5
4
  import { forwardRef } from 'react';
@@ -1,5 +1,4 @@
1
1
  import color from '../../packages/token-studio/esm/token/color/index.js';
2
- import '../../packages/token-studio/esm/token/elevation/index.js';
3
2
  import radii from '../../packages/token-studio/esm/token/radii/index.js';
4
3
  import '../../packages/token-studio/esm/token/typography/index.js';
5
4
  import styled from 'styled-components';
@@ -1,7 +1,6 @@
1
1
  import 'react';
2
2
  import SvgProgressGradient from '../../packages/icons/esm/ProgressGradient.js';
3
3
  import color from '../../packages/token-studio/esm/token/color/index.js';
4
- import '../../packages/token-studio/esm/token/elevation/index.js';
5
4
  import '../../packages/token-studio/esm/token/typography/index.js';
6
5
  import styled, { keyframes } from 'styled-components';
7
6
 
@@ -1,4 +1,3 @@
1
- import '../../packages/token-studio/esm/token/elevation/index.js';
2
1
  import space from '../../packages/token-studio/esm/token/space/index.js';
3
2
  import '../../packages/token-studio/esm/token/typography/index.js';
4
3
  import { forwardRef } from 'react';
@@ -1,4 +1,3 @@
1
- import '../../packages/token-studio/esm/token/elevation/index.js';
2
1
  import typography from '../../packages/token-studio/esm/token/typography/index.js';
3
2
  import styled from 'styled-components';
4
3
  import { fontSize, fontWeight, lineHeight, textAlign } from '../../node_modules/styled-system/dist/index.esm.js';
@@ -1,5 +1,4 @@
1
1
  import breakpoints from '../../packages/token-studio/esm/token/breakpoints/index.js';
2
- import '../../packages/token-studio/esm/token/elevation/index.js';
3
2
  import '../../packages/token-studio/esm/token/typography/index.js';
4
3
  import useMediaQuery from '../../hook/useMediaQuery.js';
5
4
  import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
package/esm/index.js CHANGED
@@ -21,3 +21,4 @@ export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedR
21
21
  export { default as useResize } from './hook/useResize.js';
22
22
  export { default as useToggleHandler } from './hook/useToggleHandler.js';
23
23
  export { default as theme } from './theme/index.js';
24
+ export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';
@@ -8,9 +8,5 @@ const surfaceElevation = {
8
8
  const shadowElevation = {
9
9
  'shadow/overlay': shadow.shadowMedium
10
10
  };
11
- ({
12
- ...surfaceElevation,
13
- ...shadowElevation
14
- });
15
11
 
16
12
  export { shadowElevation, surfaceElevation };
@@ -18,7 +18,7 @@ const theme = {
18
18
  radii,
19
19
  colors: {
20
20
  ...color,
21
- surfaceElevation
21
+ ...surfaceElevation
22
22
  },
23
23
  gradients: gradient,
24
24
  shadows: {
@@ -23,5 +23,11 @@ const wordBreak = system({
23
23
  scale: 'wordBreak'
24
24
  }
25
25
  });
26
+ const lineClamp = system({
27
+ lineClamp: {
28
+ property: 'WebkitLineClamp',
29
+ scale: 'WebkitLineClamp'
30
+ }
31
+ });
26
32
 
27
- export { sx, textDecoration, whiteSpace, wordBreak };
33
+ export { lineClamp, sx, textDecoration, whiteSpace, wordBreak };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamturing/react-kit",
3
- "version": "2.1.0",
3
+ "version": "2.2.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,5 +55,5 @@
55
55
  "lodash.throttle": "^4.1.1",
56
56
  "styled-system": "^5.1.5"
57
57
  },
58
- "gitHead": "ff56ac7dc09f3aa5318b939a50aae9d0fdbc522c"
58
+ "gitHead": "5d7caae033e9b2f4b37ffbf8bd380cff3517cea2"
59
59
  }