@remember-web/primitive 0.1.17 → 0.1.19

package/src/Common/Typography/index.tsx

@@ -1,54 +1,41 @@
 '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>
-);
+const Typography = forwardRef(function (
+  { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <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;
+} & ComponentProps<'div'>;
 
-export default forwardRef(Typography) as TypographyComponentWithRef;
+export default Typography;

package/src/Common/index.ts

@@ -1,5 +1,5 @@
 export * from './Divider';
-export * from './Flex';
+export { default as Flex } from './Flex';
 export * from './Grid';
 export * from './Spinner';
 export { default as Typography } from './Typography';

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

@@ -19,6 +19,7 @@ import {
   type SvgSizeProps,
   type WithSvgSizeComponentType,
 } from '@remember-web/icon/util';
+import styled from 'styled-components';
 
 import type { ToggleStatusType, ToggleVariantType } from '../types';
 
@@ -68,5 +69,17 @@ export function ToggleIcon({
 
   const Icon = ICON_NAME[variant][status];
 
-  return <Icon className={className} size={iconSize} />;
+  return (
+    <ToggleIconContainer className={`toggleIcon ${className}`}>
+      <Icon size={iconSize} />
+    </ToggleIconContainer>
+  );
 }
+
+const ToggleIconContainer = styled.div`
+  border-radius: 50%;
+
+  > svg {
+    display: block;
+  }
+`;

package/src/Control/BaseToggle/styles.ts

@@ -13,7 +13,7 @@ export const ToggleRoot = styled.label<{ $gap?: number }>`
   user-select: none;
   align-items: center;
 
-  & > svg {
+  & > .toggleIcon {
     transition: filter 0.2s ease-in-out;
     flex-shrink: 0;
   }
@@ -23,7 +23,7 @@ export const ToggleRoot = styled.label<{ $gap?: number }>`
   }
 
   @media (hover: hover) {
-    &:hover > svg {
+    &:hover > .toggleIcon {
       filter: grayscale(0.05) brightness(0.95);
     }
   }
@@ -36,32 +36,32 @@ export const ToggleInput = styled.input`
   height: 0px;
   margin-left: -1px;
 
-  &:checked ~ svg.offIcon {
+  &:checked ~ .toggleIcon.offIcon {
     display: none;
   }
 
-  &:not(:checked) ~ svg.onIcon {
+  &:not(:checked) ~ .toggleIcon.onIcon {
     display: none;
   }
 
-  &[type='checkbox']:indeterminate ~ svg.offIcon,
-  &[type='checkbox']:indeterminate ~ svg.onIcon {
+  &[type='checkbox']:indeterminate ~ .toggleIcon.offIcon,
+  &[type='checkbox']:indeterminate ~ .toggleIcon.onIcon {
     display: none;
   }
 
-  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {
+  &[type='checkbox']:not(:indeterminate) ~ .toggleIcon.indeterminateIcon {
     display: none;
   }
 
-  &:disabled ~ svg {
+  &:disabled ~ .toggleIcon {
     filter: grayscale(1) brightness(1.1);
   }
 
-  &:not(:disabled):active ~ svg {
+  &:not(:disabled):active ~ .toggleIcon {
     filter: grayscale(0.1) brightness(0.9);
   }
 
-  &:focus-visible ~ svg {
+  &:focus-visible ~ .toggleIcon {
     outline: solid 2px ${primary100};
     outline-offset: -1px;
   }

package/src/Modals/Dialog/index.tsx

@@ -4,7 +4,7 @@ import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
 import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
 import { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';
 
-import { Flex } from '@/Common/Flex';
+import Flex from '@/Common/Flex';
 
 import {
   DialogContent,

package/src/Paginations/CompactPagination/index.tsx

@@ -3,7 +3,7 @@
 import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
 import { contents000, contents300 } from '@remember-web/mixin';
 
-import { Flex } from '@/Common/Flex';
+import Flex from '@/Common/Flex';
 
 import {
   ArrowButton,