@coldsurf/ocean-road 1.13.2

package/src/extensions/grid-card-list/grid-card-list.tsx

@@ -0,0 +1,59 @@
+import { Fragment, type ReactNode, memo } from 'react';
+import type { GridCardListItemProps } from '../grid-card-item';
+import { GridCardListLoadMore } from '../grid-card-list-load-more';
+import {
+  StyledGridContainer,
+  StyledListContainer,
+  StyledListHeader,
+  StyledListHeaderText,
+  StyledNavigationContainer,
+} from './grid-card-list.styled';
+
+type Props = {
+  items: GridCardListItemProps[];
+  renderItem: (item: GridCardListItemProps) => ReactNode;
+  onLoadMore: () => void;
+  headerText?: string;
+  hasNextPage?: boolean;
+  isEmpty?: boolean;
+  emptyComponent?: ReactNode;
+  navigationComponent?: ReactNode;
+};
+
+export const GridCardList = memo(
+  ({
+    items,
+    renderItem,
+    onLoadMore,
+    headerText,
+    hasNextPage,
+    isEmpty,
+    emptyComponent,
+    navigationComponent,
+  }: Props) => {
+    return (
+      <StyledListContainer>
+        {headerText && (
+          <StyledListHeader>
+            <StyledListHeaderText as="h1">{headerText}</StyledListHeaderText>
+          </StyledListHeader>
+        )}
+        <StyledNavigationContainer>
+          {navigationComponent && navigationComponent}
+        </StyledNavigationContainer>
+        {isEmpty ? (
+          emptyComponent
+        ) : (
+          <StyledGridContainer>
+            {items.map((item) => (
+              <Fragment key={item.id}>{renderItem(item)}</Fragment>
+            ))}
+          </StyledGridContainer>
+        )}
+        {hasNextPage && <GridCardListLoadMore onLoadMore={onLoadMore} />}
+      </StyledListContainer>
+    );
+  }
+);
+
+GridCardList.displayName = 'GridCardList.List';

package/src/extensions/grid-card-list/index.ts

@@ -0,0 +1,2 @@
+export * from './grid-card-list';
+export * from './grid-card-list.masonry';

package/src/extensions/grid-card-list-empty/grid-card-list-empty.tsx

@@ -0,0 +1,38 @@
+import { Text } from '@/base';
+import { WEB_APP_HEADER_HEIGHT } from '@/constants';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { memo } from 'react';
+
+const StyledEmptyContainer = styled.div`
+    width: 100%;
+    height: calc(80vh - ${WEB_APP_HEADER_HEIGHT});
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    ${media.medium(css`
+        height: calc(60vh - ${WEB_APP_HEADER_HEIGHT});
+    `)}
+`;
+
+const StyledEmptyText = styled(Text)`
+    font-size: 2.125rem;
+    font-weight: 500;
+    color: ${semantics.color.foreground[1]};
+    text-align: center;
+    ${media.medium(css`
+      font-size: 24px;
+    `)}
+`;
+
+export const GridCardListEmpty = memo(({ text }: { text: string }) => {
+  return (
+    <StyledEmptyContainer>
+      <StyledEmptyText as="p">{text}</StyledEmptyText>
+    </StyledEmptyContainer>
+  );
+});

package/src/extensions/grid-card-list-empty/index.ts

@@ -0,0 +1 @@
+export * from './grid-card-list-empty';

package/src/extensions/grid-card-list-load-more/grid-card-list-load-more.styled.tsx

@@ -0,0 +1,15 @@
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const StyledLoadMoreContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+
+  ${media.medium(css`
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  `)}
+`;

package/src/extensions/grid-card-list-load-more/grid-card-list-load-more.tsx

@@ -0,0 +1,43 @@
+import { Spinner } from '@/base';
+import { memo, useEffect, useRef } from 'react';
+import { StyledLoadMoreContainer } from './grid-card-list-load-more.styled';
+
+type Props = {
+  onLoadMore: () => void;
+};
+
+export const GridCardListLoadMore = memo(({ onLoadMore }: Props) => {
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio > 0) {
+            onLoadMore();
+          }
+        });
+      },
+      {
+        threshold: 0.5,
+      }
+    );
+    const refToObserve = loadMoreRef.current;
+    if (refToObserve) {
+      intersectionObserver.observe(refToObserve);
+    }
+
+    return () => {
+      if (refToObserve) {
+        intersectionObserver.unobserve(refToObserve);
+      }
+    };
+  }, [onLoadMore]);
+
+  return (
+    <StyledLoadMoreContainer ref={loadMoreRef}>
+      <Spinner />
+    </StyledLoadMoreContainer>
+  );
+});
+
+GridCardListLoadMore.displayName = 'GridCardList.LoadMore';

package/src/extensions/grid-card-list-load-more/index.ts

@@ -0,0 +1 @@
+export * from './grid-card-list-load-more';

package/src/extensions/index.ts

@@ -0,0 +1,38 @@
+import { GridCardImage } from './grid-card-image';
+import { GridCardImageEmpty } from './grid-card-image-empty';
+import { GridCardItem, type GridCardListItemProps, MasonryGridCardItem } from './grid-card-item';
+import { GridCardList as GridCardListUI, MasonryGridCardList } from './grid-card-list';
+import { GridCardListEmpty } from './grid-card-list-empty';
+import { GridCardListLoadMore } from './grid-card-list-load-more';
+
+export const GridCardList = {
+  List: GridCardListUI,
+  MasonryList: MasonryGridCardList,
+  Item: GridCardItem,
+  MasonryItem: MasonryGridCardItem,
+  LoadMore: GridCardListLoadMore,
+  Empty: GridCardListEmpty,
+  ImageEmpty: GridCardImageEmpty,
+  Image: GridCardImage,
+};
+
+export type { GridCardListItemProps };
+
+export { ErrorUI } from './error-ui';
+
+export { AppLogo } from './app-logo';
+
+export { AppStoreButton } from './app-store-button';
+export { BrandIcon } from './brand-icon';
+export { SNSIcon } from './sns-icon';
+
+export * from './dropdown';
+export * from './menu-item';
+
+export * from './app-header';
+
+export * from './color-scheme-toggle';
+
+export * from './full-screen-modal';
+
+export * from './accordion';

package/src/extensions/menu-item/index.ts

@@ -0,0 +1 @@
+export * from './menu-item';

package/src/extensions/menu-item/menu-item.tsx

@@ -0,0 +1,87 @@
+import { Text } from '@/base';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type MotionProps, motion } from 'framer-motion';
+import { type HTMLAttributes, type PropsWithChildren, forwardRef } from 'react';
+
+const StyledMenuText = styled(Text)`
+  color: ${semantics.color.foreground[3]};
+`;
+
+const StyledMenuItem = styled.div<{ $isHighlighted?: boolean }>`
+  padding: 11px 16px;
+  border-radius: 8px;
+
+  color: ${semantics.color.foreground[3]};
+
+  flex-shrink: 0;
+
+  cursor: pointer;
+
+  align-self: flex-start;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &:hover {
+    background-color: ${semantics.color.background[4]};
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+  }
+
+  ${(props) =>
+    props.$isHighlighted &&
+    css`
+      background-color: ${semantics.color.background[3]};
+    `}
+`;
+
+const AppHeaderMenuTextSkeleton = styled.div`
+  width: 80px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: ${semantics.color.background[4]};
+
+  margin-right: 0.75rem;
+
+  ${media.medium(css`
+    width: 120px;
+    height: 24px;
+  `)}
+`;
+
+const MenuItemComponent = forwardRef<HTMLDivElement, { $isHighlighted?: boolean }>((props, ref) => {
+  return <StyledMenuItem ref={ref} {...props} />;
+});
+
+const MenuItemMotion = motion.create(MenuItemComponent);
+
+type Props = HTMLAttributes<HTMLDivElement> &
+  MotionProps & {
+    isLoading?: boolean;
+    isCurrent?: boolean;
+    icon?: React.ReactNode;
+  };
+
+export const MenuItem = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
+  ({ children, isLoading, isCurrent = false, icon, ...otherProps }, ref) => {
+    if (isLoading) {
+      return <AppHeaderMenuTextSkeleton />;
+    }
+    return (
+      <MenuItemMotion ref={ref} $isHighlighted={isCurrent} {...otherProps}>
+        {icon}
+        {typeof children === 'string' ? (
+          <StyledMenuText as="span">{children}</StyledMenuText>
+        ) : (
+          children
+        )}
+      </MenuItemMotion>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';

package/src/extensions/sns-icon/index.ts

@@ -0,0 +1 @@
+export * from './sns-icon';

package/src/extensions/sns-icon/sns-icon.facebook.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'Facebook'}</title>
+    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/sns-icon/sns-icon.instagram.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'Instagram'}</title>
+    <path d="M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38C19.074.322 18.202.12 16.924.066 15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/sns-icon/sns-icon.tsx

@@ -0,0 +1,24 @@
+import { type Ref, memo } from 'react';
+import { match } from 'ts-pattern';
+import FacebookLogo from './sns-icon.facebook';
+import InstaLogo from './sns-icon.instagram';
+import XLogo from './sns-icon.x';
+import YoutubeLogo from './sns-icon.youtube';
+
+interface Props extends React.SVGProps<SVGSVGElement> {
+  social: 'instagram' | 'x' | 'facebook' | 'youtube';
+  ref?: Ref<SVGSVGElement>;
+}
+
+export const SNSIcon = memo(({ social, ...svgProps }: Props) => {
+  const Component = match(social)
+    .with('instagram', () => <InstaLogo {...svgProps} />)
+    .with('x', () => <XLogo {...svgProps} />)
+    .with('facebook', () => <FacebookLogo {...svgProps} />)
+    .with('youtube', () => <YoutubeLogo {...svgProps} />)
+    .exhaustive();
+
+  return Component;
+});
+
+SNSIcon.displayName = 'SNSIcon';

package/src/extensions/sns-icon/sns-icon.x.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'X'}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/extensions/sns-icon/sns-icon.youtube.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type Ref, type SVGProps, forwardRef, memo } from 'react';
+const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ref={ref} {...props}>
+    <title>{'YouTube'}</title>
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+  </svg>
+);
+const ForwardRef = forwardRef(SvgComponent);
+const Memo = memo(ForwardRef);
+export default Memo;

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from '@/contexts/ColorSchemeProvider';
+export { default as ColorSchemeProvider, useColorScheme } from '@/contexts/ColorSchemeProvider';
+export { default as GlobalStyle } from '@/GlobalStyle';
+export * from '@/base';
+export * from '@/tokens';
+export * from '@/utils';
+export * from '@/extensions';
+export * from './constants';

package/src/native/button/button.styled.tsx

@@ -0,0 +1,99 @@
+import color from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+import styled, { css } from '@emotion/native';
+import { icons as Icons } from 'lucide-react-native';
+import type { ButtonTheme } from '../../base/button';
+import { getButtonBackgroundColor, getButtonForegroundColor } from '../../base/button/button.utils';
+import { colors } from '../../tokens';
+import { Text } from '../text';
+
+export const StyledButton = styled.TouchableOpacity<{
+  colorTheme: ButtonTheme;
+  size: 'lg' | 'md' | 'sm';
+}>`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ colorTheme, disabled }) =>
+    disabled ? color.oc.gray[4].value : getButtonBackgroundColor(colorTheme)};
+  padding: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '14px';
+      case 'md':
+        return '10px';
+      default:
+        return '6px';
+    }
+  }};
+  border-radius: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '22px';
+      case 'md':
+        return '16px';
+      default:
+        return '10px';
+    }
+  }};
+  ${(props) => css`
+    border-width: ${props.colorTheme === 'border' && '2px'};
+    border-color: ${props.colorTheme === 'border' && colors.oc.black.value};
+  `}
+
+  font-family: inherit;
+
+  opacity: ${(props) => (props.colorTheme === 'transparentDarkGray' ? 0.5 : 1.0)};
+`;
+
+export const StyledButtonText = styled(Text)<{ colorTheme: ButtonTheme; size: 'md' | 'sm' | 'lg' }>`
+  font-weight: 700;
+  color: ${({ colorTheme }) => getButtonForegroundColor(colorTheme)};
+  font-family: inherit;
+  font-size: ${(props) => {
+    switch (props.size) {
+      case 'lg':
+        return '14px';
+      case 'md':
+        return '12px';
+      default:
+        return '10px';
+    }
+  }};
+`;
+
+const iconSize = (size: 'lg' | 'md' | 'sm') => {
+  switch (size) {
+    case 'lg':
+      return 18;
+    case 'md':
+      return 16;
+    default:
+      return 14;
+  }
+};
+
+export const createStyledIconNative = (
+  icon: keyof typeof Icons,
+  size: 'lg' | 'md' | 'sm',
+  position: 'left' | 'right'
+) => {
+  const TargetIcon = styled(Icons[icon])`
+      color: ${colors.oc.white.value};
+    `;
+
+  return (
+    <TargetIcon
+      size={iconSize(size)}
+      strokeWidth={3}
+      style={{
+        marginLeft: position === 'right' ? 4 : undefined,
+        marginRight: position === 'left' ? 4 : undefined,
+      }}
+    />
+  );
+};
+
+export const StyledIconWrapper = styled.View<{ $position: 'left' | 'right' }>`
+  margin-right: ${({ $position }) => ($position === 'left' ? '4px' : '0px')};
+  margin-left: ${({ $position }) => ($position === 'right' ? '4px' : '0px')};
+`;

package/src/native/button/button.tsx

@@ -0,0 +1,42 @@
+import type { icons as Icons } from 'lucide-react-native';
+import { type ElementRef, forwardRef } from 'react';
+import type { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import type { ButtonProps } from '../../base/button';
+import {
+  StyledButton,
+  StyledButtonText,
+  StyledIconWrapper,
+  createStyledIconNative,
+} from './button.styled';
+
+export const Button = forwardRef<
+  ElementRef<typeof TouchableOpacity>,
+  ButtonProps & TouchableOpacityProps
+>(
+  (
+    { children, onPress, variant = 'indigo', size = 'lg', leftIcon, rightIcon, ...otherProps },
+    ref
+  ) => (
+    <StyledButton ref={ref} onPress={onPress} colorTheme={variant} size={size} {...otherProps}>
+      {leftIcon && typeof leftIcon === 'string' ? (
+        createStyledIconNative(leftIcon as keyof typeof Icons, size, 'left')
+      ) : (
+        <StyledIconWrapper $position="left">{leftIcon}</StyledIconWrapper>
+      )}
+      {typeof children === 'string' ? (
+        <StyledButtonText colorTheme={variant} size={size}>
+          {children}
+        </StyledButtonText>
+      ) : (
+        children
+      )}
+      {rightIcon && typeof rightIcon === 'string' ? (
+        createStyledIconNative(rightIcon as keyof typeof Icons, size, 'right')
+      ) : (
+        <StyledIconWrapper $position="right">{rightIcon}</StyledIconWrapper>
+      )}
+    </StyledButton>
+  )
+);
+
+Button.displayName = 'Button';

package/src/native/button/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/src/native/contexts/color-scheme-context/color-scheme-context.tsx

@@ -0,0 +1,45 @@
+import { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import type { ColorScheme } from '../../../contexts/ColorSchemeProvider';
+import { semanticVariables } from '../../../tokens/tokens';
+
+export const ColorSchemeContext = createContext<{
+  colorScheme: ColorScheme;
+  semantics:
+    | (typeof semanticVariables)['light']['color']
+    | (typeof semanticVariables)['dark']['color'];
+  setColorScheme: (colorScheme: ColorScheme) => void;
+}>({
+  colorScheme: 'light',
+  semantics: semanticVariables.light.color,
+  setColorScheme: (colorScheme) => {
+    console.log(colorScheme);
+  },
+});
+
+export const ColorSchemeProvider = ({
+  children,
+  initialColorScheme,
+}: PropsWithChildren<{
+  initialColorScheme?: ColorScheme;
+}>) => {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(initialColorScheme ?? 'light');
+  const semantics = useMemo(() => {
+    switch (colorScheme) {
+      case 'light':
+        return semanticVariables.light.color;
+      case 'dark':
+        return semanticVariables.dark.color;
+      case 'userPreference':
+        return semanticVariables.light.color;
+    }
+  }, [colorScheme]);
+  return (
+    <ColorSchemeContext.Provider value={{ colorScheme, setColorScheme, semantics }}>
+      {children}
+    </ColorSchemeContext.Provider>
+  );
+};
+
+export const useColorScheme = () => {
+  return useContext(ColorSchemeContext);
+};

package/src/native/contexts/color-scheme-context/index.ts

@@ -0,0 +1 @@
+export * from './color-scheme-context';

package/src/native/contexts/index.ts

@@ -0,0 +1 @@
+export * from './color-scheme-context';

package/src/native/icon-button/icon-button.styled.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/native';
+
+export const StyledIconButtonContainer = styled.TouchableOpacity`
+  justify-content: center;
+  align-items: center;
+`;

package/src/native/icon-button/icon-button.tsx

@@ -0,0 +1,33 @@
+import { icons as Icons } from 'lucide-react-native';
+import { colors } from '../../tokens';
+import { StyledIconButtonContainer } from './icon-button.styled';
+import type { IconButtonProps } from './icon-button.types';
+import { getIconButtonBackgroundStyles, getIconButtonSizeStyles, sizes } from './icon-button.utils';
+
+export const IconButton = ({
+  icon,
+  onPress,
+  variant = 'transparent',
+  size = 'md',
+  style,
+  color,
+  strokeWidth,
+  fill,
+  ...otherProps
+}: IconButtonProps) => {
+  const TargetIcon = Icons[icon];
+  return (
+    <StyledIconButtonContainer
+      {...otherProps}
+      style={[getIconButtonSizeStyles(size), getIconButtonBackgroundStyles(variant), style]}
+      onPress={onPress}
+    >
+      <TargetIcon
+        fill={fill}
+        size={sizes[size] - 12}
+        strokeWidth={strokeWidth ?? 4}
+        color={color ?? colors.oc.white.value}
+      />
+    </StyledIconButtonContainer>
+  );
+};

package/src/native/icon-button/icon-button.types.ts

@@ -0,0 +1,14 @@
+import type { icons } from 'lucide-react-native';
+import type { ColorValue, TouchableOpacityProps } from 'react-native';
+import type { ButtonTheme } from '../../base/button';
+
+export interface IconButtonProps extends TouchableOpacityProps {
+  icon: keyof typeof icons;
+  size?: IconButtonSize;
+  variant?: ButtonTheme;
+  color?: ColorValue;
+  strokeWidth?: number;
+  fill?: ColorValue;
+}
+
+export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';