@remember-web/primitive 0.1.18 → 0.1.20

package/src/Badge/Badge.stories.tsx

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react';
 import styled from 'styled-components';
 
-import { badgePseudo } from '@/Badge/utils';
-import type { BadgeAttribute } from '@/Badge/types';
 import { Badge } from '@/Badge/Badge';
+import type { BadgeAttribute } from '@/Badge/types';
+import { badgePseudo } from '@/Badge/utils';
 
 type Story = StoryObj<typeof Badge>;
 

package/src/Badge/style.tsx

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components';
 import {
   contents999,
   getTypographyStyles,
   secondary100,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 /**
  * pseudo로 사용시 data-badge-value attribue가 필요합니다.

package/src/Badge/utils.ts

@@ -1,5 +1,5 @@
-import type { BadgeValueProps } from '@/Badge/types';
 import { getBadgePseudoCss } from '@/Badge/style';
+import type { BadgeValueProps } from '@/Badge/types';
 
 export const getBadgeValue = (props: BadgeValueProps): string => {
   if (typeof props === 'string') {

package/src/Buttons/Button/Button.stories.tsx

@@ -56,7 +56,7 @@ export const AnchorButton: Story = {
       isIconName(iconString) &&
       createElement(getIconComponentFromName(iconString));
 
-    return <Button {...args} icon={iconElement} as="a" href="#" />;
+    return <Button {...(args as any)} icon={iconElement} as="a" href="#" />;
   },
 };
 

package/src/Buttons/Button/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { ElementType, ForwardRefRenderFunction } from 'react';
+import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import type { As } from '@remember-web/shared';
+import type { PolymorphicComponent } from 'styled-components';
 
 import { Spinner } from '@/Common';
 
@@ -10,52 +10,43 @@ import { SPINNER_SIZE_MAP } from './const';
 import { StyledButton } from './styles';
 import type { ButtonProps } from './types';
 
-const Button: ForwardRefRenderFunction<
-  HTMLButtonElement,
-  ButtonProps<'button'> & As<ElementType>
-> = (
-  {
-    children,
-    color,
-    size = 'small',
-    variant = 'primary',
-    layout = 'block',
-    isLoading = false,
-    filled = variant === 'primary',
-    icon,
-    iconPosition = 'left',
-    ...props
-  },
-  ref
-) => (
-  <StyledButton
-    $color={color}
-    $size={size}
-    $variant={variant}
-    $layout={layout}
-    $isLoading={isLoading}
-    $filled={filled}
-    aria-live="polite"
-    aria-busy={isLoading}
-    ref={ref}
-    {...props}
-  >
-    {isLoading ? (
-      <Spinner size={SPINNER_SIZE_MAP[size]} />
-    ) : (
-      <>
-        {iconPosition === 'left' && icon}
-        {children}
-        {iconPosition === 'right' && icon}
-      </>
-    )}
-  </StyledButton>
-);
-
-type ButtonComponentWithRef = <T extends ElementType = 'button'>(
-  props: { as?: T | null } & ButtonProps<T> & {
-      ref?: React.ComponentPropsWithRef<T>['ref'];
-    }
-) => React.ReactElement | null;
-
-export default forwardRef(Button) as ButtonComponentWithRef;
+export const Button = forwardRef(
+  (
+    {
+      children,
+      color,
+      size = 'small',
+      variant = 'primary',
+      layout = 'block',
+      isLoading = false,
+      filled = variant === 'primary',
+      icon,
+      iconPosition = 'left',
+      ...props
+    }: ButtonProps,
+    ref: ForwardedRef<HTMLButtonElement | null>
+  ) => (
+    <StyledButton
+      $color={color}
+      $size={size}
+      $variant={variant}
+      $layout={layout}
+      $isLoading={isLoading}
+      $filled={filled}
+      aria-live="polite"
+      aria-busy={isLoading}
+      ref={ref}
+      {...props}
+    >
+      {isLoading ? (
+        <Spinner size={SPINNER_SIZE_MAP[size]} />
+      ) : (
+        <>
+          {iconPosition === 'left' && icon}
+          {children}
+          {iconPosition === 'right' && icon}
+        </>
+      )}
+    </StyledButton>
+  )
+) as PolymorphicComponent<'web', ButtonProps>;

package/src/Buttons/Button/styles.ts

@@ -1,7 +1,5 @@
 'use client';
 
-import type { DataAttributes } from 'styled-components';
-import styled, { css } from 'styled-components';
 import {
   bg100,
   disabled,
@@ -9,11 +7,12 @@ import {
   primary100,
   primary200,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import { BUTTON_COLORS, BUTTON_SIZES, ICON_GAP_MAP } from './const';
 import type { ButtonStyleProps } from './types';
 
-export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
+export const StyledButton = styled.button<ButtonStyleProps>(
   ({ $size, $layout, $color, ...props }) => [
     // 공용 스타일
     css`
@@ -38,14 +37,16 @@ export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
       text-align: center;
 
       width: fit-content;
-      ${$layout === 'fullBlock' && `width: 100%;`}
+      ${$layout === 'fullBlock' && 'width: 100%;'}
       min-width: ${BUTTON_SIZES[$size].minWidth};
       height: ${BUTTON_SIZES[$size].height};
       padding: ${BUTTON_SIZES[$size].padding};
       border-radius: 4px;
 
-      color: ${(props.$variant.startsWith('outline') ? $color : null) ??
-      BUTTON_COLORS[props.$variant].color};
+      color: ${
+        (props.$variant.startsWith('outline') ? $color : null) ??
+        BUTTON_COLORS[props.$variant].color
+      };
 
       &:focus-visible:not(:disabled) {
         outline: 2px solid ${primary100};
@@ -86,8 +87,9 @@ export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
     // primary 스타일
     props.$variant === 'primary' &&
       css`
-        background-color: ${$color ??
-        BUTTON_COLORS[props.$variant].backgroundColor};
+        background-color: ${
+          $color ?? BUTTON_COLORS[props.$variant].backgroundColor
+        };
         &:disabled {
           background-color: ${disabled};
         }
@@ -99,9 +101,9 @@ export const StyledButton = styled.button<ButtonStyleProps & DataAttributes>(
     // outline 스타일
     props.$variant === 'outline' &&
       css`
-        background-color: ${props.$filled
-          ? bg100
-          : BUTTON_COLORS[props.$variant].backgroundColor};
+        background-color: ${
+          props.$filled ? bg100 : BUTTON_COLORS[props.$variant].backgroundColor
+        };
         border: 1px solid ${$color ?? BUTTON_COLORS[props.$variant].borderColor};
         &:disabled {
           border-color: ${disabled};

package/src/Buttons/Button/types.ts

@@ -1,6 +1,6 @@
-import type { ElementType } from 'react';
-import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared';
+import type { ComponentProps } from 'react';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xLarge';
 
@@ -19,13 +19,7 @@ export interface ButtonStyleProps {
   $filled?: boolean;
 }
 
-type ConvertProps = ConvertTransientProps<Partial<ButtonStyleProps>>;
-
-export type ButtonProps<AsT extends ElementType> = Omit<
-  React.ComponentPropsWithoutRef<AsT>,
-  keyof ButtonStyleProps | 'icon' | 'iconPosition'
-> &
-  ConvertProps & {
-    icon?: React.ReactNode;
-    iconPosition?: 'left' | 'right';
-  };
+export type ButtonProps = ConvertTransientProps<Partial<ButtonStyleProps>> & {
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+} & ComponentProps<'button'>;

package/src/Buttons/index.ts

@@ -1 +1 @@
-export { default as Button } from './Button';
+export * from './Button';

package/src/Common/Divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Flex } from '../Flex';
+import Flex from '../Flex';
 import { Divider } from './index';
 
 type Story = StoryObj<typeof Divider>;

package/src/Common/Divider/index.tsx

@@ -1,22 +1,25 @@
 'use client';
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import styled from 'styled-components';
 import { divider } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
   color?: string;
+  $width?: string | number;
+  $height?: string | number;
 }
 
 const StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`
   background-color: ${({ color = divider }) => color};
   &[data-orientation='horizontal'] {
     height: 1px;
-    width: 100%;
+    width: ${({ $width = '100%' }) =>
+      typeof $width === 'number' ? `${$width}px` : $width};
   }
-
   &[data-orientation='vertical'] {
-    height: 100%;
+    height: ${({ $height = '100%' }) =>
+      typeof $height === 'number' ? `${$height}px` : $height};
     width: 1px;
   }
 `;

package/src/Common/Flex/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import type { CSSProperties, ElementType, HTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
 import type { ConvertTransientProps } from '@remember-web/shared';
+import type { CSSProperties, ComponentProps, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
-  as?: ElementType;
+export interface FlexStyledProps extends ComponentProps<'div'> {
   $align?: CSSProperties['alignItems'];
   $direction?: CSSProperties['flexDirection'];
   $justify?: CSSProperties['justifyContent'];
@@ -15,7 +16,7 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
   $height?: string | number;
 }
 
-const StyledFlex = styled.div<Partial<FlexProps>>(
+const StyledFlex = styled.div<Partial<FlexStyledProps>>(
   ({
     $align = 'center',
     $direction = 'row',
@@ -47,26 +48,33 @@ const StyledFlex = styled.div<Partial<FlexProps>>(
  * @prop {CSSProperties['flexDirection']} direction
  * @prop {CSSProperties['flexWrap']} wrap
  */
-export const Flex = ({
-  as,
-  width,
-  height,
-  direction,
-  gap,
-  align,
-  justify,
-  wrap,
-  ...props
-}: ConvertTransientProps<FlexProps>) => (
-  <StyledFlex
-    as={as}
-    $width={width}
-    $height={height}
-    $direction={direction}
-    $gap={gap}
-    $align={align}
-    $justify={justify}
-    $wrap={wrap}
-    {...props}
-  />
-);
+
+export const Flex = forwardRef(
+  (
+    {
+      width,
+      height,
+      direction,
+      gap,
+      align,
+      justify,
+      wrap,
+      ...props
+    }: FlexProps,
+    ref: ForwardedRef<HTMLDivElement | null>
+  ) => (
+    <StyledFlex
+      ref={ref}
+      $width={width}
+      $height={height}
+      $direction={direction}
+      $gap={gap}
+      $align={align}
+      $justify={justify}
+      $wrap={wrap}
+      {...props}
+    />
+  )
+) as PolymorphicComponent<'web', FlexProps>;
+
+export type FlexProps = ConvertTransientProps<FlexStyledProps>;

package/src/Common/Grid/index.tsx

@@ -30,6 +30,7 @@ const StyledGrid = styled.div<Partial<GridProps>>`
 `;
 
 /**
+ * @deprecated
  * @prop {string} width
  * @prop {string} height
  * @prop {CSSProperties['alignItems']} align

package/src/Common/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,35 @@
+import { Skeleton } from '@/Common/Skeleton';
+import { divider } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
+
+
+
+type Story = StoryObj<typeof Skeleton>;
+
+const meta = {
+  title: 'Primitive/Skeleton/Skeleton',
+  component: Skeleton,
+  args: {
+    animate: true,
+    width: 300,
+    height: 300,
+    variant: 'rounded',
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div
+      style={{
+        border: `solid 1px ${divider}`,
+        height: '300px',
+        width: '300px',
+        padding: 14,
+      }}
+    >
+      <Skeleton {...args} />
+    </div>
+  ),
+};
+
+export default meta;

package/src/Common/Skeleton/index.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { ConvertTransientProps } from '@remember-web/shared';
+
+import type { StyledSkeletonProps } from '@/Common/Skeleton/styles';
+import { StyledSkeleton } from '@/Common/Skeleton/styles';
+
+type SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &
+  ComponentPropsWithoutRef<'div'>;
+
+export const Skeleton = forwardRef(function (
+  { variant, width, height, animate = true, ...props }: SkeletonProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <StyledSkeleton
+      ref={ref}
+      $variant={variant}
+      $width={width}
+      $height={height}
+      $animate={animate}
+      {...props}
+    />
+  );
+});

package/src/Common/Skeleton/styles.ts

@@ -0,0 +1,46 @@
+import { contents200 } from '@remember-web/mixin';
+import styled, { css, keyframes } from 'styled-components';
+
+const shimmerAnimation = keyframes`
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
+`;
+
+export const skeletonShimmer = css`
+  --from-color: rgba(255, 255, 255, 0.75);
+  --to-color: rgba(255, 255, 255, 0.55);
+
+  background: linear-gradient(
+    90deg,
+    var(--from-color) 25%,
+    var(--to-color) 37%,
+    var(--from-color) 63%
+  );
+  background-size: 400% 100%;
+  animation: ${shimmerAnimation};
+  animation-duration: 1.8s;
+  animation-iteration-count: infinite;
+`;
+
+export interface StyledSkeletonProps {
+  $variant?: 'circle' | 'rounded';
+  $width?: number | string;
+  $height?: number | string;
+  $animate?: boolean;
+}
+
+export const StyledSkeleton = styled.div<StyledSkeletonProps>`
+  width: ${({ $width = '100%' }) =>
+    typeof $width === 'number' ? `${$width}px` : $width};
+  height: ${({ $height = '100%' }) =>
+    typeof $height === 'number' ? `${$height}px` : $height};
+  border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};
+  ${({ $animate }) => ($animate ? skeletonShimmer : null)};
+  background-color: ${contents200};
+  position: relative;
+  overflow: hidden;
+`;

package/src/Common/Spinner/Spinner.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { divider } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Spinner } from './index';
 

package/src/Common/Spinner/styles.ts

@@ -15,11 +15,13 @@ export const Container = styled.div<SpinnerStyleProps>(
     justify-content: center;
     width: fit-content;
     height: fit-content;
-    ${layout === 'full' &&
-    css`
+    ${
+      layout === 'full' &&
+      css`
       width: 100%;
       height: 100%;
-    `}
+    `
+    }
 
     ${$color && `color: ${$color};`};
 

package/src/Common/Spinner/types.ts

@@ -1,5 +1,5 @@
-import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared';
 
 export type SpinnerLayout = 'full' | 'block';
 export type SpinnerSize = 'small' | 'medium' | 'large' | number;

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

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import type { TypographyStyle } from '@remember-web/mixin';
 import { TYPOGRAPHY_STYLES } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import {
   Paper,

package/src/Common/Typography/index.tsx

@@ -1,54 +1,39 @@
 'use client';
 
+import type { TypographyStyle } from '@remember-web/mixin';
 import type {
-  ComponentPropsWithoutRef,
-  ComponentPropsWithRef,
   CSSProperties,
-  ElementType,
-  ReactElement,
+  ComponentProps,
+  ForwardedRef,
   ReactNode,
 } from 'react';
 import { forwardRef } from 'react';
-import { type TypographyStyle } from '@remember-web/mixin';
+import type { PolymorphicComponent } from 'styled-components';
 
 import { StyledTypography } from './styles';
 
-const Typography = <T extends ElementType>(
-  {
-    variant,
-    as,
-    color,
-    children,
-    ellipsis,
-    maxWidth,
-    ...props
-  }: TypographyProps<T>,
-  ref: ComponentPropsWithRef<T>['ref']
-) => (
-  <StyledTypography
-    ref={ref}
-    as={as}
-    $variant={variant}
-    $color={color}
-    $ellipsis={ellipsis}
-    $maxWidth={maxWidth}
-    {...props}
-  >
-    {children}
-  </StyledTypography>
-);
+export const Typography = forwardRef(
+  (
+    { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,
+    ref: ForwardedRef<HTMLDivElement | null>
+  ) => (
+    <StyledTypography
+      ref={ref}
+      $variant={variant}
+      $color={color}
+      $ellipsis={ellipsis}
+      $maxWidth={maxWidth}
+      {...props}
+    >
+      {children}
+    </StyledTypography>
+  )
+) as PolymorphicComponent<'web', TypographyProps>;
 
-type TypographyProps<T extends ElementType> = {
+type TypographyProps = {
   variant: TypographyStyle;
-  as?: T;
   color?: string;
   children?: ReactNode;
   ellipsis?: number;
   maxWidth?: CSSProperties['maxWidth'];
-} & ComponentPropsWithoutRef<T>;
-
-type TypographyComponentWithRef = <T extends ElementType = 'div'>(
-  props: TypographyProps<T> & { ref?: ComponentPropsWithRef<T>['ref'] }
-) => ReactElement | null;
-
-export default forwardRef(Typography) as TypographyComponentWithRef;
+} & ComponentProps<'div'>;

package/src/Common/Typography/styles.ts

@@ -1,12 +1,12 @@
 'use client';
 
-import styled, { css } from 'styled-components';
-import type { CSSProperties } from 'react';
 import {
+  type TypographyStyle,
   ellipsis,
   getTypographyStyles,
-  type TypographyStyle,
 } from '@remember-web/mixin';
+import type { CSSProperties } from 'react';
+import styled, { css } from 'styled-components';
 
 export const StyledTypography = styled.div<{
   $variant: TypographyStyle;

package/src/Common/index.ts

@@ -2,7 +2,8 @@ export * from './Divider';
 export * from './Flex';
 export * from './Grid';
 export * from './Spinner';
-export { default as Typography } from './Typography';
+export * from './Skeleton';
+export * from './Typography';
 
 /** GNB에서 의존하기 때문에 export */
 export { StyledTypography } from './Typography/styles';

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -15,9 +15,9 @@ import {
 } from '@remember-web/icon';
 import {
   SVG_SIZES,
-  isSvgRegularSize,
   type SvgSizeProps,
   type WithSvgSizeComponentType,
+  isSvgRegularSize,
 } from '@remember-web/icon/util';
 import styled from 'styled-components';
 

package/src/Control/BaseToggle/styles.ts

@@ -1,7 +1,7 @@
 'use client';
 
-import styled from 'styled-components';
 import { primary100 } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const ToggleRoot = styled.label<{ $gap?: number }>`
   width: fit-content;