@remember-web/primitive 0.2.7 → 0.2.9

package/src/Common/Typography/Typography.stories.tsx

@@ -25,7 +25,7 @@ export const Overview: Story = {
   render: () => (
     <Paper $minWidth={640} $maxWidth={800}>
       <TitleContainer>
-        <Typography variant="Headline2_B">Typography</Typography>
+        <Typography variant="Headline">Typography</Typography>
       </TitleContainer>
       <Table>
         <TableHeader>
@@ -53,7 +53,7 @@ export const Overview: Story = {
                   </Typography>
                 </TableColumn>
                 <TableColumn align="center">{fontSize}px</TableColumn>
-                <TableColumn align="center">{lineHeight}px</TableColumn>
+                <TableColumn align="center">{lineHeight}</TableColumn>
                 <TableColumn align="center">{fontWeight}</TableColumn>
               </TableRow>
             );
@@ -68,28 +68,28 @@ export const Variants: Story = {
   render: (args) => (
     <Paper>
       <TitleContainer>
-        <Typography variant="Headline4_B">적용 스타일</Typography>
+        <Typography variant="SubTitle1">적용 스타일</Typography>
         <Typography {...args}>{args.children || args.variant}</Typography>
       </TitleContainer>
-      <Typography variant="Headline4_B">실제 마크업</Typography>
+      <Typography variant="SubTitle1">실제 마크업</Typography>
       {renderToStaticMarkup(
         <Typography {...args}>{args.children || args.variant}</Typography>
       )}
     </Paper>
   ),
-  args: { variant: 'Headline2_B' },
+  args: { variant: 'Headline' },
 };
 
 export const Ellipsis: Story = {
   render: ({ variant, ...args }) => (
     <Paper>
-      <Typography variant="Body1" ellipsis={1} maxWidth={160} {...args}>
+      <Typography variant="UIBody2" ellipsis={1} maxWidth={160} {...args}>
         아주긴이름아주긴이름아주긴이 름아주긴이름아주
         긴이름아주긴이름아주긴이름아주긴이름
       </Typography>
     </Paper>
   ),
-  args: { variant: 'Headline2_B' },
+  args: { variant: 'Headline' },
 };
 
 export default meta;

package/src/Control/BaseToggle/index.tsx

@@ -31,7 +31,7 @@ const _BaseToggle: ForwardRefRenderFunction<
 ) => {
   const isStringLabel = typeof _label === 'string';
   const label = isStringLabel ? (
-    <Typography variant="Body1">{_label}</Typography>
+    <Typography variant="UIBody3">{_label}</Typography>
   ) : (
     _label
   );

package/src/Floating/DropdownMenu/styles.tsx

@@ -6,7 +6,7 @@ import {
   getTypographyStyles,
 } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
-import styled, { css, CSSProperties } from 'styled-components';
+import styled, { css, type CSSProperties } from 'styled-components';
 
 import { StyledPopoverContent } from '../Popover/styles';
 
@@ -15,7 +15,7 @@ export const dropdownMenuItemCSS = css`
   align-items: center;
   padding: 8px 12px;
 
-  ${getTypographyStyles('Body1')};
+  ${getTypographyStyles('UIBody2')};
   color: ${contents000};
   transition: background-color 0.07s;
   border-radius: unset;
@@ -35,7 +35,7 @@ export const DropdownMenuItemDisabledCSS = css`
 
 export const StyledDropdownMenuSectionTitle = styled.span`
   ${dropdownMenuItemCSS};
-  ${getTypographyStyles('Body2_M')};
+  ${getTypographyStyles('Caption1')};
   color: ${contents200};
 `;
 
@@ -58,6 +58,10 @@ export const getDropdownMenuItemCss = ({
     css`
       font-weight: ${$active ? 600 : 400};
 
+      &:hover{
+        font-weight: 600;
+      }
+
       &:focus-visible {
         outline: none;
       }
@@ -73,12 +77,13 @@ export const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(
   })
 )<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);
 
-
-export const StyledDropdownMenuContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+export const StyledDropdownMenuContentWrapper = styled.div<{
+  $zIndex?: CSSProperties['zIndex'];
+}>`
   [data-radix-popper-content-wrapper]{
-    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}
   }
-`
+`;
 
 export const StyledDropdownMenuSection = styled.div``;
 

package/src/Floating/Tooltip/styles.ts

@@ -9,8 +9,8 @@ import {
 } from '@remember-web/mixin';
 import styled, { css, keyframes } from 'styled-components';
 
+import type { CSSProperties } from 'react';
 import type { TooltipSize, TooltipTextAlign } from './types';
-import { CSSProperties } from 'react';
 
 const TOOLTIP_CONTENT_CONSTANTS: Record<
   TooltipSize,
@@ -18,11 +18,11 @@ const TOOLTIP_CONTENT_CONSTANTS: Record<
 > = {
   large: {
     padding: '8px 12px',
-    typography: 'Body1',
+    typography: 'UIBody2',
   },
   small: {
     padding: '4px 8px',
-    typography: 'Body2',
+    typography: 'UIBody3',
   },
 };
 
@@ -43,11 +43,13 @@ export const TooltipTriggerWrapper = styled.div`
   }
 `;
 
-export const TooltipContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+export const TooltipContentWrapper = styled.div<{
+  $zIndex?: CSSProperties['zIndex'];
+}>`
   [data-radix-popper-content-wrapper]{
-    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+    ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}
   }
-`
+`;
 
 export const TooltipContent = styled(RadixTooltip.Content)<{
   $size: TooltipSize;
@@ -65,13 +67,7 @@ export const TooltipContent = styled(RadixTooltip.Content)<{
   will-change: opacity;
   animation: ${fadeIn} 200ms forwards;
   gap: 4px;
-  ${({
-    $size,
-    $maxWidth,
-    $backgroundColor,
-    $contentColor,
-    $textAlign,
-  }) => [
+  ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [
     css`
       padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};
       ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -16,7 +16,7 @@ export const StyledSelect = styled.select<{
 }>`
   all: unset;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   border: 1px solid ${contents300};
   border-radius: 4px;
   padding: 10px 36px 10px 12px;

package/src/Inputs/Select/styles.ts

@@ -11,7 +11,7 @@ import {
 import styled from 'styled-components';
 
 export const SelectContainer = styled.div<{ $width?: number | string }>`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${contents000};
   width: ${({ $width }) => {
     if (!$width) {
@@ -39,7 +39,7 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
 `;
 
 export const SelectLabel = styled.label`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
   display: block;
   margin-bottom: 12px;
   display: flex;

package/src/Inputs/TextInput/index.tsx

@@ -39,6 +39,13 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
     props.hasTogglePasswordVisibilityButton &&
     isVisiblePassword;
 
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  const inputInnerProps = {
+    ...props,
+    hasTogglePasswordVisibilityButton: undefined,
+  };
+
   return (
     <InputWrapper $width={width}>
       {label && (
@@ -49,7 +56,7 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
       )}
       <InputContainer
         disabled={disabled}
-        hasError={!!errorMessage}
+        $hasError={!!errorMessage}
         className={className}
       >
         {leftElement && <InputDecorator>{leftElement}</InputDecorator>}
@@ -57,7 +64,7 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
           disabled={disabled}
           id={inputId}
           aria-labelledby={label ? labelId : undefined}
-          {...props}
+          {...inputInnerProps}
           type={isForceVisibleInput ? 'text' : props.type || 'text'}
           ref={ref}
         />

package/src/Inputs/TextInput/styles.ts

@@ -23,7 +23,7 @@ export const InputWrapper = styled.div<{ $width?: string | number }>`
 
 export const InputContainer = styled.div<{
   disabled?: boolean;
-  hasError?: boolean;
+  $hasError?: boolean;
 }>`
   display: flex;
   align-items: center;
@@ -36,8 +36,8 @@ export const InputContainer = styled.div<{
     border-color 0.2s,
     background-color 0.2s;
 
-  ${({ hasError, disabled }) => [
-    hasError
+  ${({ $hasError, disabled }) => [
+    $hasError
       ? css`
           border-color: ${roleRed};
         `
@@ -62,7 +62,7 @@ export const InputDecorator = styled.div`
 `;
 
 export const InputInner = styled.input`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${contents000};
 
   display: block;
@@ -86,7 +86,7 @@ export const InputInner = styled.input`
 `;
 
 export const InputLabel = styled.label`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
   display: block;
   margin-bottom: 12px;
   display: flex;
@@ -100,14 +100,14 @@ export const InputLabel = styled.label`
 `;
 
 export const InputError = styled.div`
-  ${getTypographyStyles('Body2_M')}
+  ${getTypographyStyles('Caption1')}
   color: ${roleRed};
 
   margin-top: 8px;
 `;
 
 export const InputHintText = styled.span<{ textColor?: ColorVariable }>`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody2')}
   color: ${({ textColor }) => textColor};
   white-space: nowrap;
 `;

package/src/Logos/RememberServiceLogo/index.tsx

@@ -1,6 +1,6 @@
 import type { GetStyledComponentProps } from '@remember-web/shared';
 
-import { Divider } from '@/Common';
+import { Divider, Flex, Typography } from '@/Common';
 import type { RememberLogoProps } from '@/Logos/types';
 
 import { RememberLogo } from '../RememberLogo';
@@ -22,10 +22,12 @@ export const RememberServiceLogo = <As,>({
   <StyledServiceLogoRoot $color={color} {...props}>
     <RememberLogo color={color} />
     {label && (
-      <>
+      <Flex gap={8}>
         <Divider decorative orientation="vertical" style={{ height: '15px' }} />
-        <b>{label}</b>
-      </>
+        <Typography variant="SubTitle1" style={{ lineHeight: 1 }}>
+          {label}
+        </Typography>
+      </Flex>
     )}
   </StyledServiceLogoRoot>
 );

package/src/Logos/RememberServiceLogo/style.ts

@@ -7,12 +7,6 @@ export const StyledServiceLogoRoot = styled.a<{ $color?: string }>`
   color: ${({ $color = contents000 }) => $color};
 
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   gap: 8px;
-
-  > b {
-    ${getTypographyStyles('Title2')};
-    text-decoration: none;
-    line-height: 16px;
-  }
 `;

package/src/Modals/Dialog/styles.ts

@@ -66,7 +66,7 @@ export const IconButton = styled.button`
 `;
 
 export const DialogTitle = styled(DialogPrimitive.Title)`
-  ${getTypographyStyles('Headline4_B')}
+  ${getTypographyStyles('SubTitle1')}
 
   color: ${contents000};
   margin: 0;
@@ -75,7 +75,7 @@ export const DialogTitle = styled(DialogPrimitive.Title)`
 `;
 
 export const DialogDescription = styled(DialogPrimitive.Description)`
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
 
   color: ${contents100};
   margin: 4px 0 24px;

package/src/Paginations/styles.ts

@@ -30,7 +30,7 @@ export const PaginationContainer = styled.nav`
 export const CompactPaginationContainer = styled.div`
   all: unset;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
   gap: 16px;
   display: flex;
   align-items: center;
@@ -39,7 +39,7 @@ export const CompactPaginationContainer = styled.div`
 `;
 
 export const CurrentPage = styled.span`
-  ${getTypographyStyles('Body1_B')}
+  ${getTypographyStyles('SubTitle2')}
 `;
 
 export const Pages = styled.ul`
@@ -55,7 +55,7 @@ const DefaultButton = styled.button.attrs({ type: 'button' })`
   appearance: none;
   box-sizing: border-box;
 
-  ${getTypographyStyles('Body1_M')}
+  ${getTypographyStyles('UIBody3')}
   display: grid;
   place-items: center;
 

package/src/index.ts

@@ -8,3 +8,4 @@ export * from './Modals';
 export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
+export * from './Chips';

package/src/stories/common.styles.tsx

@@ -44,7 +44,7 @@ export const TableHeader = styled.thead``;
 
 export const TableBody = styled.tbody``;
 
-const Th = styled.th<{ align?: TextAlign }>`
+const Th = styled.th<{ align?: TextAlign; rowSpan?: number }>`
   border: 1px solid ${contents100};
   border-width: 1px 0 1px 0;
   padding: 10px;
@@ -52,7 +52,7 @@ const Th = styled.th<{ align?: TextAlign }>`
   vertical-align: middle;
 `;
 
-const Td = styled.td<{ align?: TextAlign }>`
+const Td = styled.td<{ align?: TextAlign; rowSpan?: number }>`
   border-bottom: 1px solid ${contents300};
   vertical-align: top;
   padding: 20px 10px;
@@ -63,16 +63,22 @@ const Td = styled.td<{ align?: TextAlign }>`
 export const TableColumn = ({
   isHeader,
   align = 'left',
+  rowSpan,
   children,
 }: {
   isHeader?: boolean;
   align?: TextAlign;
+  rowSpan?: number;
   children: ReactNode;
 }) =>
   isHeader ? (
-    <Th align={align}>{children}</Th>
+    <Th align={align} rowSpan={rowSpan}>
+      {children}
+    </Th>
   ) : (
-    <Td align={align}>{children}</Td>
+    <Td align={align} rowSpan={rowSpan}>
+      {children}
+    </Td>
   );
 
 export const TableRow = styled.tr``;