@teamturing/react-kit 2.1.1 → 2.3.0

package/dist/core/GradientText/index.d.ts

@@ -274,7 +274,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     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;
-} & 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"> & {
+} & 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"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, Props>>;
 export default GradientText;

package/dist/enigma/View/ChipGroupView/index.d.ts

@@ -0,0 +1,6 @@
+import { ChipGroupView as ChipGroupViewType } from '../../types';
+type Props = {
+    view: ChipGroupViewType;
+};
+declare const ChipGroupView: ({ view: { size, gapX, gapY, chips } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ChipGroupView;

package/dist/enigma/View/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ImageView } from './ImageView';
 export { default as TextView } from './TextView';
+export { default as ChipGroupViewType } from './ChipGroupView';

package/dist/enigma/types/index.d.ts

@@ -1,3 +1,4 @@
+import { ChipProps, StackProps } from '../..';
 /**
  * Default Types
  */
@@ -16,8 +17,17 @@ export type ImageView = {
     width: number;
     height: number;
 };
-export type View = TextView | ImageView;
-export type ViewComponentType = 'TextView' | 'ImageView';
+export type ChipGroupView = {
+    size: ChipProps['size'];
+    gapX: StackProps['gapX'];
+    gapY: StackProps['gapY'];
+    chips: Array<{
+        text: string;
+        variant: ChipProps['variant'];
+    }>;
+};
+export type View = TextView | ImageView | ChipGroupView;
+export type ViewComponentType = 'TextView' | 'ImageView' | 'ChipGroupView';
 export interface IViewContainer {
     id: string;
     viewComponentType: ViewComponentType;

package/dist/index.d.ts

@@ -48,3 +48,7 @@ export { default as useToggleHandler } from './hook/useToggleHandler';
  * theme
  */
 export { default as theme } from './theme';
+/**
+ * styled-system utils
+ */
+export * from './utils/styled-system';

package/dist/index.js

@@ -1732,6 +1732,12 @@ const wordBreak = system({
     scale: 'wordBreak'
   }
 });
+const lineClamp = system({
+  lineClamp: {
+    property: 'WebkitLineClamp',
+    scale: 'WebkitLineClamp'
+  }
+});
 
 const View = styled__default.default.div`
   ${compose(layout, color, flexbox, background, border, position, shadow)}
@@ -3610,7 +3616,7 @@ const Unit = ({
     children: children
   });
 };
-var index$1 = Object.assign(Grid, {
+var index = Object.assign(Grid, {
   Unit
 });
 
@@ -3985,7 +3991,7 @@ const Item = ({
   ...props,
   children: children
 });
-var index = Object.assign(Stack, {
+var Stack$1 = Object.assign(Stack, {
   Item
 });
 
@@ -4115,6 +4121,35 @@ const TextView = ({
   children: text
 });
 
+const ChipGroupView = ({
+  view: {
+    size = 'm',
+    gapX = 1,
+    gapY = 1,
+    chips = []
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1, {
+  gapX: gapX,
+  gapY: gapY,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+    items: chips,
+    renderItem: ({
+      text,
+      variant
+    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
+      size: size,
+      variant: variant,
+      children: text
+    }),
+    renderItemWrapper: (children, {
+      text,
+      variant
+    }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack$1.Item, {
+      children: children
+    }, `${text}-${variant}-${i}`)
+  })
+});
+
 const EnigmaUI = ({
   section: {
     views,
@@ -4149,7 +4184,8 @@ const getLayoutComponent = layoutContainer => {
 const getViewComponent = viewContainer => {
   const renderableViewComponent = {
     TextView: TextView,
-    ImageView: ImageView
+    ImageView: ImageView,
+    ChipGroupView: ChipGroupView
   };
   const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
   return ViewComponent;
@@ -4661,22 +4697,27 @@ exports.Button = Button;
 exports.Chip = Chip;
 exports.EnigmaUI = EnigmaUI;
 exports.GradientText = GradientText;
-exports.Grid = index$1;
+exports.Grid = index;
 exports.IconButton = IconButton;
 exports.IconToggleButton = IconToggleButton;
 exports.Image = Image;
 exports.ItemList = ItemList;
 exports.Space = Space;
 exports.Spinner = Spinner;
-exports.Stack = index;
+exports.Stack = Stack$1;
 exports.StyledIcon = StyledIcon;
 exports.Text = Text;
 exports.ThemeProvider = ThemeProvider;
 exports.UnstyledButton = UnstyledButton;
 exports.View = View;
+exports.lineClamp = lineClamp;
+exports.sx = sx;
+exports.textDecoration = textDecoration;
 exports.theme = theme;
 exports.useDevice = useDevice;
 exports.useOutsideClick = useOutsideClick;
 exports.useProvidedOrCreatedRef = useProvidedOrCreatedRef;
 exports.useResize = useResize;
 exports.useToggleHandler = useToggleHandler;
+exports.whiteSpace = whiteSpace;
+exports.wordBreak = wordBreak;

package/dist/utils/styled-system/index.d.ts

@@ -27,5 +27,9 @@ type WordBreakProps<ThemeType extends Theme = RequiredTheme> = {
     wordBreak?: ResponsiveValue<CSS.Property.WordBreak, ThemeType> | undefined;
 };
 declare const wordBreak: import("styled-system").styleFn;
-export { sx, textDecoration, whiteSpace, wordBreak };
-export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps };
+type LineClampProps<ThemeType extends Theme = RequiredTheme> = {
+    lineClamp?: ResponsiveValue<CSS.Property.LineClamp, ThemeType> | undefined;
+};
+declare const lineClamp: import("styled-system").styleFn;
+export { sx, textDecoration, whiteSpace, wordBreak, lineClamp };
+export type { BetterSystemStyleObject, AsProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps, LineClampProps };

package/esm/core/Stack/index.js

@@ -56,8 +56,8 @@ const Item = ({
   ...props,
   children: children
 });
-var index = Object.assign(Stack, {
+var Stack$1 = Object.assign(Stack, {
   Item
 });
 
-export { index as default };
+export { Stack$1 as default };

package/esm/enigma/EnigmaUI/index.js

@@ -4,6 +4,7 @@ import useMediaQuery from '../../hook/useMediaQuery.js';
 import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
 import ImageView from '../View/ImageView/index.js';
 import TextView from '../View/TextView/index.js';
+import ChipGroupView from '../View/ChipGroupView/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const EnigmaUI = ({
@@ -40,7 +41,8 @@ const getLayoutComponent = layoutContainer => {
 const getViewComponent = viewContainer => {
   const renderableViewComponent = {
     TextView: TextView,
-    ImageView: ImageView
+    ImageView: ImageView,
+    ChipGroupView: ChipGroupView
   };
   const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
   return ViewComponent;

package/esm/enigma/View/ChipGroupView/index.js

@@ -0,0 +1,51 @@
+import '../../../core/Button/index.js';
+import Chip from '../../../core/Chip/index.js';
+import '../../../core/GradientText/index.js';
+import '../../../core/Grid/index.js';
+import '../../../core/IconButton/index.js';
+import '../../../core/IconToggleButton/index.js';
+import '../../../core/Image/index.js';
+import ItemList from '../../../core/ItemList/index.js';
+import '../../../core/Space/index.js';
+import '../../../core/Spinner/index.js';
+import Stack from '../../../core/Stack/index.js';
+import '../../../core/View/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+import '../../../core/Text/index.js';
+import 'styled-components';
+import '../../../packages/token-studio/esm/token/typography/index.js';
+import '../../../core/_UnstyledButton.js';
+import 'react';
+import '../../../node_modules/lodash.debounce/index.js';
+import '../../../utils/styled-system/index.js';
+
+const ChipGroupView = ({
+  view: {
+    size = 'm',
+    gapX = 1,
+    gapY = 1,
+    chips = []
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack, {
+  gapX: gapX,
+  gapY: gapY,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+    items: chips,
+    renderItem: ({
+      text,
+      variant
+    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Chip, {
+      size: size,
+      variant: variant,
+      children: text
+    }),
+    renderItemWrapper: (children, {
+      text,
+      variant
+    }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Stack.Item, {
+      children: children
+    }, `${text}-${variant}-${i}`)
+  })
+});
+
+export { ChipGroupView as default };

package/esm/index.js

@@ -21,3 +21,4 @@ export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedR
 export { default as useResize } from './hook/useResize.js';
 export { default as useToggleHandler } from './hook/useToggleHandler.js';
 export { default as theme } from './theme/index.js';
+export { lineClamp, sx, textDecoration, whiteSpace, wordBreak } from './utils/styled-system/index.js';

package/esm/utils/styled-system/index.js

@@ -23,5 +23,11 @@ const wordBreak = system({
     scale: 'wordBreak'
   }
 });
+const lineClamp = system({
+  lineClamp: {
+    property: 'WebkitLineClamp',
+    scale: 'WebkitLineClamp'
+  }
+});
 
-export { sx, textDecoration, whiteSpace, wordBreak };
+export { lineClamp, sx, textDecoration, whiteSpace, wordBreak };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -55,5 +55,5 @@
     "lodash.throttle": "^4.1.1",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "a1f6672a71b9573e70b1105a11d8f52650bfba64"
+  "gitHead": "240a735943c47a590aff021d5e49f99e4138a00e"
 }