@teamturing/react-kit 2.52.2 → 2.53.1

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

@@ -0,0 +1,25 @@
+import { HTMLProps } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    file: File | Blob;
+    variant?: 'default' | 'thumbnail';
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean;
+    /**
+     *
+     */
+    validationStatus?: 'error' | undefined;
+    /**
+     * 시각적인 후행 부분에 상호작용할 요소를 정의합니다.
+     */
+    trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
+} & SxProp;
+declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default FileItem;
+export type { Props as FileItemProps };

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { default as Drawer } from './core/Drawer';
 export type { DrawerProps, UnstyledDrawerHeaderProps, UnstyledDrawerBodyProps, UnstyledDrawerFooterProps, DrawerHeaderProps, DrawerHeaderIconButtonProps, DrawerBodyProps, DrawerFooterProps, } from './core/Drawer';
 export { default as EmptyState } from './core/EmptyState';
 export type { EmptyStateProps } from './core/EmptyState';
+export { default as FileItem } from './core/FileItem';
+export type { FileItemProps } from './core/FileItem';
 export { default as Flash } from './core/Flash';
 export type { FlashProps } from './core/Flash';
 export { default as FormControl } from './core/FormControl';

package/dist/index.js

@@ -4023,7 +4023,9 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
 
 const MotionView = framerMotion.motion(View);
 
-const UnstyledDialogBody = styled__default.default.div`
+const UnstyledDialogBody = styled__default.default.div.attrs({
+  className: 'trk-dialog_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
@@ -4045,7 +4047,9 @@ const DialogBody = ({
   children: children
 });
 
-const UnstyledDialogFooter = styled__default.default.div`
+const UnstyledDialogFooter = styled__default.default.div.attrs({
+  className: 'trk-dialog_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4076,7 +4080,9 @@ const DialogFooter = ({
   children: children
 });
 
-const UnstyledDialogHeader = styled__default.default.div`
+const UnstyledDialogHeader = styled__default.default.div.attrs({
+  className: 'trk-dialog_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4106,6 +4112,7 @@ const DialogHeaderSubtitle = ({
   color = 'text/neutral/subtler',
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(Text, {
+  className: 'trk-dialog_header_subtitle',
   typography: typography,
   color: color,
   ...props
@@ -4116,6 +4123,7 @@ const DialogHeaderTitle = ({
   color = 'text/neutral',
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(Text, {
+  className: 'trk-dialog_header_title',
   typography: typography,
   color: color,
   ...props
@@ -4198,6 +4206,7 @@ const Dialog = ({
           width: '100%',
           height: '100%',
           children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
+            className: `rkt-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
             role: 'dialog',
@@ -4242,6 +4251,7 @@ const Dialog = ({
                 right: 3
               },
               children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+                className: 'trk-dialog__close_button',
                 ref: closeButtonRef,
                 icon: icons.CloseIcon,
                 variant: 'plain',
@@ -4293,7 +4303,9 @@ var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   Footer: DialogFooter
 });
 
-const UnstyledDrawerBody = styled__default.default.div`
+const UnstyledDrawerBody = styled__default.default.div.attrs({
+  className: 'trk-drawer_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
@@ -4315,7 +4327,9 @@ const DrawerBody = ({
   children: children
 });
 
-const UnstyledDrawerFooter = styled__default.default.div`
+const UnstyledDrawerFooter = styled__default.default.div.attrs({
+  className: 'trk-drawer_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4346,7 +4360,9 @@ const DrawerFooter = ({
   children: children
 });
 
-const UnstyledDrawerHeader = styled__default.default.div`
+const UnstyledDrawerHeader = styled__default.default.div.attrs({
+  className: 'trk-drawer_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4498,6 +4514,7 @@ const Drawer = ({
           } : {})
         },
         children: /*#__PURE__*/jsxRuntime.jsxs(BaseDrawer, {
+          className: `trk-drawer--${size}`,
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
@@ -4513,6 +4530,7 @@ const Drawer = ({
               right: 5
             },
             children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+              className: 'trk-drawer__close_button',
               ref: closeButtonRef,
               icon: icons.CloseIcon,
               variant: 'plain-bold',
@@ -4716,6 +4734,219 @@ const BaseEmptyState = styled__default.default.div`
   ${sx}
 `;
 
+const FileItem = ({
+  file,
+  variant = 'default',
+  disabled,
+  loading,
+  validationStatus,
+  trailingAction,
+  ...props
+}) => {
+  const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
+  const fileName = 'name' in file ? file.name : '';
+  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : icons.DocumentIcon;
+  const [objectUrl, setObjectUrl] = React.useState('');
+  React.useEffect(() => {
+    setObjectUrl(URL.createObjectURL(file));
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(BaseFile, {
+    variant: variant,
+    disabled: disabled,
+    loading: disabled,
+    validationStatus: validationStatus,
+    trailingAction: trailingAction,
+    ...props,
+    children: variant === 'default' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(FileIcon, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: fileName
+      }), validationStatus === 'error' ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+        icon: icons.ExclamationPointInCircleIcon,
+        size: 24,
+        color: 'icon/danger'
+      }) : loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {
+        width: 24,
+        height: 24
+      }) : null, trailingAction]
+    }) : variant === 'thumbnail' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx("img", {
+        src: objectUrl
+      }) : fileType === 'video' ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: 'file__thumbnail__video',
+        children: [/*#__PURE__*/jsxRuntime.jsx("video", {
+          src: objectUrl
+        }), /*#__PURE__*/jsxRuntime.jsx(icons.VideoIcon, {})]
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: 'file__thumbnail__whatever',
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.DocumentIcon, {})
+      }), validationStatus === 'error' || loading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: 'file__thumbnail__cover',
+        children: validationStatus === 'error' ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+          icon: icons.ExclamationPointInCircleIcon,
+          size: 24,
+          color: 'icon/danger'
+        }) : loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {
+          width: 24,
+          height: 24
+        }) : null
+      }) : null, trailingAction]
+    }) : null
+  });
+};
+const BaseFile = styled__default.default.div({
+  position: 'relative'
+}, ({
+  theme,
+  disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    default: {
+      'backgroundColor': theme.colors['bg/neutral'],
+      'borderRadius': theme.radii.xs,
+      'width': '100%',
+      'height': utils.forcePixelValue(48),
+      'py': 1,
+      'pr': 2,
+      'pl': 4,
+      'display': 'flex',
+      'columnGap': 2,
+      'alignItems': 'center',
+      '& > svg': {
+        width: 24,
+        height: 24,
+        color: theme.colors['icon/neutral/bold']
+      },
+      '& > span': {
+        flex: 1,
+        fontSize: theme.fontSizes.xs,
+        fontWeight: theme.fontWeights.medium,
+        lineHeight: theme.lineHeights[2],
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors['text/neutral/subtle']
+      },
+      ...(disabled ? {
+        '& > svg': {
+          color: theme.colors['icon/disabled']
+        },
+        '& span': {
+          color: theme.colors['text/disabled']
+        }
+      } : {})
+    },
+    thumbnail: {
+      'display': 'flex',
+      'alignItems': 'center',
+      'justifyContent': 'center',
+      'width': utils.forcePixelValue(160),
+      'maxWidth': utils.forcePixelValue(160),
+      'aspectRatio': '16 / 9',
+      'backgroundColor': theme.colors['bg/neutral'],
+      'overflow': 'hidden',
+      'borderRadius': 'xs',
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: utils.forcePixelValue(0),
+        right: utils.forcePixelValue(0),
+        bottom: utils.forcePixelValue(0),
+        left: utils.forcePixelValue(0),
+        borderWidth: 1,
+        borderColor: theme.colors['border/neutral'],
+        borderStyle: 'solid',
+        borderRadius: 'xs',
+        pointerEvents: 'none'
+      },
+      '& > .file__thumbnail__cover': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        pointerEvents: 'none',
+        backgroundColor: 'bg/neutral'
+      },
+      '& > img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      },
+      '& > .file__thumbnail__video': {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: 24,
+          height: 24,
+          color: 'icon/primary'
+        },
+        video: {
+          width: '100%'
+        }
+      },
+      '& > .file__thumbnail__whatever': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        svg: {
+          width: 24,
+          height: 24,
+          color: 'icon/neutral/bold'
+        }
+      },
+      '& > button': {
+        position: 'absolute',
+        top: 0,
+        right: 0
+      },
+      ...(disabled ? {} : {})
+    }
+  }
+}), ({
+  theme,
+  variant: propVariant
+}) => variant({
+  prop: 'validationStatus',
+  variants: {
+    error: {
+      ...(propVariant === 'thumbnail' ? {
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: utils.forcePixelValue(0),
+          right: utils.forcePixelValue(0),
+          bottom: utils.forcePixelValue(0),
+          left: utils.forcePixelValue(0),
+          borderWidth: 2,
+          borderColor: theme.colors['border/danger'],
+          borderStyle: 'solid',
+          borderRadius: 'xs',
+          pointerEvents: 'none'
+        }
+      } : {})
+    }
+  }
+}), sx);
+
 const Flash = ({
   variant = 'neutral',
   icon: Icon = variant === 'danger' ? icons.WarningIcon : variant === 'assist' ? icons.TwinkleIcon : variant === 'accent' ? icons.InfoInCircleIcon : icons.InfoInCircleIcon,
@@ -7986,6 +8217,7 @@ exports.Dialog = index$8;
 exports.Drawer = index$7;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
+exports.FileItem = FileItem;
 exports.Flash = index$6;
 exports.FormControl = index$5;
 exports.GradientText = GradientText;

package/esm/core/Dialog/DialogHeaderSubtitle.js

@@ -6,6 +6,7 @@ const DialogHeaderSubtitle = ({
   color = 'text/neutral/subtler',
   ...props
 }) => /*#__PURE__*/jsx(Text, {
+  className: 'trk-dialog_header_subtitle',
   typography: typography,
   color: color,
   ...props

package/esm/core/Dialog/DialogHeaderTitle.js

@@ -6,6 +6,7 @@ const DialogHeaderTitle = ({
   color = 'text/neutral',
   ...props
 }) => /*#__PURE__*/jsx(Text, {
+  className: 'trk-dialog_header_title',
   typography: typography,
   color: color,
   ...props

package/esm/core/Dialog/_UnstyledDialogBody.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogBody = styled.div`
+const UnstyledDialogBody = styled.div.attrs({
+  className: 'trk-dialog_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;

package/esm/core/Dialog/_UnstyledDialogFooter.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogFooter = styled.div`
+const UnstyledDialogFooter = styled.div.attrs({
+  className: 'trk-dialog_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Dialog/_UnstyledDialogHeader.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogHeader = styled.div`
+const UnstyledDialogHeader = styled.div.attrs({
+  className: 'trk-dialog_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Dialog/index.js

@@ -94,6 +94,7 @@ const Dialog = ({
           width: '100%',
           height: '100%',
           children: /*#__PURE__*/jsxs(BaseDialog, {
+            className: `rkt-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
             role: 'dialog',
@@ -138,6 +139,7 @@ const Dialog = ({
                 right: 3
               },
               children: /*#__PURE__*/jsx(IconButton, {
+                className: 'trk-dialog__close_button',
                 ref: closeButtonRef,
                 icon: CloseIcon,
                 variant: 'plain',

package/esm/core/Drawer/_UnstyledDrawerBody.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerBody = styled.div`
+const UnstyledDrawerBody = styled.div.attrs({
+  className: 'trk-drawer_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;

package/esm/core/Drawer/_UnstyledDrawerFooter.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerFooter = styled.div`
+const UnstyledDrawerFooter = styled.div.attrs({
+  className: 'trk-drawer_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Drawer/_UnstyledDrawerHeader.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerHeader = styled.div`
+const UnstyledDrawerHeader = styled.div.attrs({
+  className: 'trk-drawer_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Drawer/index.js

@@ -129,6 +129,7 @@ const Drawer = ({
           } : {})
         },
         children: /*#__PURE__*/jsxs(BaseDrawer, {
+          className: `trk-drawer--${size}`,
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
@@ -144,6 +145,7 @@ const Drawer = ({
               right: 5
             },
             children: /*#__PURE__*/jsx(IconButton, {
+              className: 'trk-drawer__close_button',
               ref: closeButtonRef,
               icon: CloseIcon,
               variant: 'plain-bold',