@hzblj/kara-components 0.0.0-stage → 0.1.0

package/src/atoms/countdown/countdown.android.tsx

@@ -0,0 +1,49 @@
+import {Host} from '@expo/ui/jetpack-compose'
+import {Countdown as NativeCountdown} from '@hzblj/kara-native/jetpack-compose'
+import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
+import {StyleSheet, useWindowDimensions} from 'react-native'
+import type {CountdownComponent, CountdownProps} from './countdown.types'
+import {CountdownFrame} from './countdown-frame'
+import {toEpochMs, useCountdownUnits} from './countdown-units'
+
+export const Countdown: CountdownComponent = ({
+  color = 'content.primary',
+  endsAt,
+  locale,
+  testID,
+  units,
+  variant = 'body',
+}: CountdownProps) => {
+  const theme = useAppTheme()
+  const {fontScale} = useWindowDimensions()
+  const resolvedUnits = useCountdownUnits(locale, units)
+  const endsAtMs = toEpochMs(endsAt)
+  const style = theme.typography[variant]
+
+  /**
+   * Compose reads `sp` and scales it by the font scale itself — uncapped — while the React Native frame under it stops
+   * at `MAX_FONT_SCALE`. Pre-dividing by the part Compose would add past the cap lands both on the same size.
+   */
+  const scale = Math.min(fontScale, MAX_FONT_SCALE) / fontScale
+
+  return (
+    <CountdownFrame endsAt={endsAtMs} testID={testID} units={resolvedUnits} variant={variant}>
+      <Host
+        colorScheme={theme.dark ? 'dark' : 'light'}
+        pointerEvents="none"
+        seedColor={theme.materialSeed}
+        style={StyleSheet.absoluteFill}
+      >
+        <NativeCountdown
+          color={theme.color(color)}
+          endsAt={endsAtMs}
+          fontFamily={style.fontFamily}
+          fontSize={style.fontSize * scale}
+          fontWeight={style.weight}
+          lineHeight={style.lineHeight * scale}
+          units={resolvedUnits}
+        />
+      </Host>
+    </CountdownFrame>
+  )
+}

package/src/atoms/countdown/countdown.ios.tsx

@@ -0,0 +1,46 @@
+import {Host} from '@expo/ui/swift-ui'
+import {Countdown as NativeCountdown} from '@hzblj/kara-native/swift-ui'
+import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
+import {StyleSheet, useWindowDimensions} from 'react-native'
+import type {CountdownComponent, CountdownProps} from './countdown.types'
+import {CountdownFrame} from './countdown-frame'
+import {toEpochMs, useCountdownUnits} from './countdown-units'
+
+export const Countdown: CountdownComponent = ({
+  color = 'content.primary',
+  endsAt,
+  locale,
+  testID,
+  units,
+  variant = 'body',
+}: CountdownProps) => {
+  const theme = useAppTheme()
+  const {fontScale} = useWindowDimensions()
+  const resolvedUnits = useCountdownUnits(locale, units)
+  const endsAtMs = toEpochMs(endsAt)
+  const style = theme.typography[variant]
+
+  /** SwiftUI is handed points, so it is scaled here exactly as React Native scales the frame text under it. */
+  const scale = Math.min(fontScale, MAX_FONT_SCALE)
+
+  return (
+    <CountdownFrame endsAt={endsAtMs} testID={testID} units={resolvedUnits} variant={variant}>
+      <Host
+        colorScheme={theme.dark ? 'dark' : 'light'}
+        ignoreSafeArea="all"
+        pointerEvents="none"
+        style={StyleSheet.absoluteFill}
+      >
+        <NativeCountdown
+          color={theme.color(color)}
+          endsAt={endsAtMs}
+          fontFamily={style.fontFamily}
+          fontSize={style.fontSize * scale}
+          fontWeight={style.weight}
+          lineHeight={style.lineHeight * scale}
+          units={resolvedUnits}
+        />
+      </Host>
+    </CountdownFrame>
+  )
+}

package/src/atoms/countdown/countdown.types.ts

@@ -0,0 +1,24 @@
+import type {CountdownUnits} from '@hzblj/kara-native'
+import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type {CountdownUnits} from '@hzblj/kara-native'
+
+/**
+ * A live countdown — `2d / 05h / 09m / 41s` — drawn natively, so it ticks and rolls its digits without a React render
+ * per second. The React Native tier: it sizes itself with an invisible React Native text of the same shape, and lays
+ * its own native host over that, so it needs no `Screen` or `Island` around it.
+ */
+export type CountdownProps = {
+  color?: ColorToken
+  /** The moment it reaches zero, as a `Date` or epoch milliseconds. It stops there. */
+  endsAt: Date | number
+  /** Picks the unit initials when `units` is not given. The device's locale by default. */
+  locale?: string
+  testID?: string
+  /** Overrides the locale's unit initials. */
+  units?: CountdownUnits
+  variant?: TextVariant
+}
+
+export type CountdownComponent = (props: CountdownProps) => ReactNode

package/src/atoms/countdown/index.ts

@@ -0,0 +1,2 @@
+export * from './countdown'
+export * from './countdown.types'

package/src/atoms/date-picker/date-picker.tsx

@@ -0,0 +1,26 @@
+import {DateTimePicker} from '@expo/ui/community/datetime-picker'
+import {useCallback} from 'react'
+
+import type {DatePickerComponent, DatePickerProps} from './date-picker.types'
+
+export const DatePicker: DatePickerComponent = ({
+  max,
+  min,
+  mode = 'date',
+  onValueChange,
+  testID,
+  value,
+}: DatePickerProps) => {
+  const onChange = useCallback(
+    (_event: unknown, date?: Date) => {
+      if (date) {
+        onValueChange?.(date)
+      }
+    },
+    [onValueChange]
+  )
+
+  return (
+    <DateTimePicker maximumDate={max} minimumDate={min} mode={mode} onChange={onChange} testID={testID} value={value} />
+  )
+}

package/src/atoms/date-picker/date-picker.types.ts

@@ -0,0 +1,14 @@
+import type {ReactNode} from 'react'
+
+export type DatePickerMode = 'date' | 'datetime' | 'time'
+
+export type DatePickerProps = {
+  max?: Date
+  min?: Date
+  mode?: DatePickerMode
+  onValueChange?: (date: Date) => void
+  testID?: string
+  value: Date
+}
+
+export type DatePickerComponent = (props: DatePickerProps) => ReactNode

package/src/atoms/date-picker/index.ts

@@ -0,0 +1,2 @@
+export * from './date-picker'
+export * from './date-picker.types'

package/src/atoms/divider/divider.android.tsx

@@ -0,0 +1,12 @@
+import {HorizontalDivider} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {DividerComponent, DividerProps} from './divider.types'
+
+export const Divider: DividerComponent = ({color = 'border.tertiary'}: DividerProps) => {
+  useHostGuard('Divider')
+  const theme = useAppTheme()
+
+  return <HorizontalDivider color={theme.color(color)} />
+}

package/src/atoms/divider/divider.ios.tsx

@@ -0,0 +1,15 @@
+import {Divider as SwiftUIDivider} from '@expo/ui/swift-ui'
+import {background} from '@expo/ui/swift-ui/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {DividerComponent, DividerProps} from './divider.types'
+
+export const Divider: DividerComponent = ({color = 'border.tertiary', testID}: DividerProps) => {
+  useHostGuard('Divider')
+  const theme = useAppTheme()
+  const modifiers = useMemo(() => [background(theme.color(color))], [color, theme])
+
+  return <SwiftUIDivider modifiers={modifiers} testID={testID} />
+}

package/src/atoms/divider/divider.types.ts

@@ -0,0 +1,9 @@
+import type {ColorToken} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type DividerProps = {
+  color?: ColorToken
+  testID?: string
+}
+
+export type DividerComponent = (props: DividerProps) => ReactNode

package/src/atoms/divider/index.ts

@@ -0,0 +1,2 @@
+export * from './divider'
+export * from './divider.types'

package/src/atoms/fab/fab.android.tsx

@@ -0,0 +1,18 @@
+import {FloatingActionButton} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import {Icon} from '../icon'
+import type {FabComponent, FabProps} from './fab.types'
+
+export const Fab: FabComponent = ({name, onPress}: FabProps) => {
+  useHostGuard('Fab')
+
+  const theme = useAppTheme()
+
+  return (
+    <FloatingActionButton containerColor={theme.color('fill.accent.primary')} onClick={onPress}>
+      <Icon color="content.on.bg" name={name} />
+    </FloatingActionButton>
+  )
+}

package/src/atoms/fab/fab.ios.tsx

@@ -0,0 +1,27 @@
+import {Button} from '@expo/ui/swift-ui'
+import {buttonStyle} from '@expo/ui/swift-ui/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import {Icon} from '../icon'
+import type {FabComponent, FabProps} from './fab.types'
+
+export const Fab: FabComponent = ({name, onPress, testID}: FabProps) => {
+  useHostGuard('Fab')
+
+  const sxModifiers = useSxModifiers({
+    bg: 'fill.accent.primary',
+    borderRadius: 'full',
+    h: 56,
+    p: 's16',
+    shadow: 'btn.accent',
+    w: 56,
+  })
+  const modifiers = useMemo(() => [buttonStyle('plain'), ...sxModifiers], [sxModifiers])
+
+  return (
+    <Button modifiers={modifiers} onPress={onPress} testID={testID}>
+      <Icon color="content.on.bg" name={name} />
+    </Button>
+  )
+}

package/src/atoms/fab/fab.types.ts

@@ -0,0 +1,11 @@
+import type {ReactNode} from 'react'
+
+import type {IconName} from '../icon'
+
+export type FabProps = {
+  name: IconName
+  onPress?: () => void
+  testID?: string
+}
+
+export type FabComponent = (props: FabProps) => ReactNode

package/src/atoms/fab/index.ts

@@ -0,0 +1,2 @@
+export * from './fab'
+export * from './fab.types'

package/src/atoms/flash-list/flash-list.tsx

@@ -0,0 +1,28 @@
+import {useSplitSx, useSx} from '@hzblj/kara-sx'
+import {FlashList as ShopifyFlashList} from '@shopify/flash-list'
+
+import type {FlashListProps} from './flash-list.types'
+
+/** Stands in for an absent `content`, because a hook cannot be called conditionally. */
+const NO_SX = {}
+
+/**
+ * The default list in this codebase: recycles its rows, so it holds a long list at a steady cost.
+ *
+ * `RnFlatList` and `RnSectionList` are the alternatives, and only for rows that host native views —
+ * see either one for why recycling and absolute positioning cannot carry an `@expo/ui` host.
+ */
+export const FlashList = <TItem,>({content, data, renderItem, ...props}: FlashListProps<TItem>) => {
+  const [style, rest] = useSplitSx(props as Record<string, unknown>)
+  const contentStyle = useSx(content ?? NO_SX)
+
+  return (
+    <ShopifyFlashList
+      data={data}
+      renderItem={renderItem}
+      {...rest}
+      contentContainerStyle={content === undefined ? undefined : contentStyle}
+      style={style}
+    />
+  )
+}

package/src/atoms/flash-list/flash-list.types.ts

@@ -0,0 +1,20 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {FlashListRef, FlashListProps as ShopifyFlashListProps} from '@shopify/flash-list'
+import type {Ref} from 'react'
+
+/**
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container — the same split
+ * as `RnScrollView` and the React Native lists.
+ *
+ * Padding belongs in `content` here and nowhere else. FlashList measures its rows against its own
+ * `style`, and padding there throws that measurement off; its docs put it as "margin is okay but padding
+ * is not". `content` has no such limit, because it lands on the scroll view's content container.
+ *
+ * `ref` is declared because this is a wrapper rather than the re-export it used to be — React 19 passes
+ * it as a plain prop, and a `FlashListRef` is how a caller reaches `scrollToIndex` and friends.
+ */
+export type FlashListProps<TItem> = ResponsiveViewSx &
+  Omit<ShopifyFlashListProps<TItem>, 'contentContainerStyle' | 'style'> & {
+    content?: ResponsiveViewSx
+    ref?: Ref<FlashListRef<TItem>>
+  }

package/src/atoms/flash-list/index.ts

@@ -0,0 +1,2 @@
+export * from './flash-list'
+export * from './flash-list.types'

package/src/atoms/glass-view/glass-fallback.tsx

@@ -0,0 +1,9 @@
+import {Box} from '../box'
+import type {GlassViewProps} from './glass-view.types'
+
+/** The capsule drawn where there is no Liquid Glass to draw. */
+export const GlassFallback = ({children, interactive: _interactive, tint, ...props}: GlassViewProps) => (
+  <Box borderRadius="full" {...props} bg={tint ?? 'fill.tertiary'}>
+    {children}
+  </Box>
+)

package/src/atoms/glass-view/glass-view.android.tsx

@@ -0,0 +1,5 @@
+import {GlassFallback} from './glass-fallback'
+import type {GlassViewComponent, GlassViewProps} from './glass-view.types'
+
+/** Android has no Liquid Glass, so this is always the fallback capsule. */
+export const GlassView: GlassViewComponent = (props: GlassViewProps) => <GlassFallback {...props} />

package/src/atoms/glass-view/glass-view.ios.tsx

@@ -0,0 +1,30 @@
+import {isLiquidGlassAvailable} from '@hzblj/kara-native'
+import {GlassView as NativeGlassView} from '@hzblj/kara-native/swift-ui'
+import {useSx} from '@hzblj/kara-sx'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {GlassFallback} from './glass-fallback'
+import type {GlassViewComponent, GlassViewProps} from './glass-view.types'
+
+/**
+ * The native view is a capsule by construction — its corner radius follows its bounds — so `borderRadius` is the
+ * fallback's business only.
+ */
+const LiquidGlass = ({children, interactive = false, testID, tint, ...sx}: GlassViewProps) => {
+  const theme = useAppTheme()
+  const style = useSx(sx)
+
+  return (
+    <NativeGlassView
+      colorScheme={theme.dark ? 'dark' : 'light'}
+      glassTint={tint ? theme.color(tint) : undefined}
+      isInteractive={interactive}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </NativeGlassView>
+  )
+}
+
+export const GlassView: GlassViewComponent = (props: GlassViewProps) =>
+  isLiquidGlassAvailable() ? <LiquidGlass {...props} /> : <GlassFallback {...props} />

package/src/atoms/glass-view/glass-view.types.ts

@@ -0,0 +1,20 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ColorToken} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+/**
+ * iOS 26 Liquid Glass around a React Native subtree, shaped as a capsule — the React Native tier, so it needs no host
+ * and costs next to nothing in a list cell. Where there is no Liquid Glass (Android, and iOS before 26) it draws a
+ * capsule of `tint` instead, or of `fill.tertiary` when there is none.
+ */
+export type GlassViewProps = ResponsiveViewSx & {
+  /** React Native views. Give them `pointerEvents="none"` when `interactive`, so the press reaches the `Pressable`. */
+  children?: ReactNode
+  /** Swells toward the finger on touch, carrying the children with it. Wrap the view in a `Pressable` for the press. */
+  interactive?: boolean
+  testID?: string
+  /** Tints the material. Unset leaves it clear. */
+  tint?: ColorToken
+}
+
+export type GlassViewComponent = (props: GlassViewProps) => ReactNode

package/src/atoms/glass-view/index.ts

@@ -0,0 +1,3 @@
+export {isLiquidGlassAvailable} from '@hzblj/kara-native'
+export * from './glass-view'
+export * from './glass-view.types'

package/src/atoms/h-stack/h-stack.android.tsx

@@ -0,0 +1,39 @@
+import {Row} from '@expo/ui/jetpack-compose'
+import {clickable, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {HStackAlign, HStackComponent, HStackProps} from './h-stack.types'
+
+const ALIGNMENT = {
+  center: 'center',
+  end: 'bottom',
+  start: 'top',
+} as const satisfies Record<HStackAlign, string>
+
+export const HStack: HStackComponent = ({
+  align = 'start',
+  children,
+  onPress,
+  spacing: gap,
+  testID,
+  ...sx
+}: HStackProps) => {
+  useHostGuard('HStack')
+  const sxModifiers = useSxModifiers(sx)
+  const modifiers = useMemo(
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...(onPress ? [clickable(onPress)] : [])],
+    [onPress, sxModifiers, testID]
+  )
+
+  return (
+    <Row
+      verticalAlignment={ALIGNMENT[align]}
+      horizontalArrangement={gap === undefined ? undefined : {spacedBy: spacing[gap]}}
+      modifiers={modifiers}
+    >
+      {children}
+    </Row>
+  )
+}

package/src/atoms/h-stack/h-stack.ios.tsx

@@ -0,0 +1,46 @@
+import {HStack as SwiftUIHStack} from '@expo/ui/swift-ui'
+import {onTapGesture} from '@expo/ui/swift-ui/modifiers'
+import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {HStackAlign, HStackComponent, HStackProps} from './h-stack.types'
+
+const ALIGNMENT = {
+  center: 'center',
+  end: 'bottom',
+  start: 'top',
+} as const satisfies Record<HStackAlign, string>
+
+const FRAME_ALIGNMENT = {
+  center: 'leading',
+  end: 'bottomLeading',
+  start: 'topLeading',
+} as const satisfies Record<HStackAlign, FrameAlignment>
+
+export const HStack: HStackComponent = ({
+  align = 'start',
+  children,
+  onPress,
+  spacing: gap,
+  testID,
+  ...sx
+}: HStackProps) => {
+  useHostGuard('HStack')
+  const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align])
+  const modifiers = useMemo(
+    () => (onPress ? [...sxModifiers, onTapGesture(onPress)] : sxModifiers),
+    [onPress, sxModifiers]
+  )
+
+  return (
+    <SwiftUIHStack
+      alignment={ALIGNMENT[align]}
+      modifiers={modifiers}
+      spacing={gap === undefined ? undefined : spacing[gap]}
+      testID={testID}
+    >
+      {children}
+    </SwiftUIHStack>
+  )
+}

package/src/atoms/h-stack/h-stack.types.ts

@@ -0,0 +1,15 @@
+import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type HStackAlign = 'center' | 'end' | 'start'
+
+export type HStackProps = ResponsiveSx & {
+  align?: HStackAlign
+  children?: ReactNode
+  onPress?: () => void
+  spacing?: SpaceSize
+  testID?: string
+}
+
+export type HStackComponent = (props: HStackProps) => ReactNode

package/src/atoms/h-stack/index.ts

@@ -0,0 +1,2 @@
+export * from './h-stack'
+export * from './h-stack.types'

package/src/atoms/icon/icon-names.ts

@@ -0,0 +1,53 @@
+import type {IconName} from './icon.types'
+
+export const SF_SYMBOLS = {
+  add: 'plus',
+  arrowLeft: 'arrow.left',
+  arrowRight: 'arrow.right',
+  calendar: 'calendar',
+  check: 'checkmark',
+  chevronDown: 'chevron.down',
+  chevronRight: 'chevron.right',
+  close: 'xmark',
+  error: 'exclamationmark.octagon',
+  grid: 'square.grid.2x2',
+  heart: 'heart',
+  home: 'house',
+  info: 'info.circle',
+  lock: 'lock',
+  more: 'ellipsis',
+  notification: 'bell',
+  search: 'magnifyingglass',
+  settings: 'gearshape',
+  share: 'square.and.arrow.up',
+  star: 'star',
+  trash: 'trash',
+  user: 'person',
+  warning: 'exclamationmark.triangle',
+} as const satisfies Record<IconName, string>
+
+export const MATERIAL_ICONS = {
+  add: 'add',
+  arrowLeft: 'arrow-back',
+  arrowRight: 'arrow-forward',
+  calendar: 'calendar-today',
+  check: 'check',
+  chevronDown: 'expand-more',
+  chevronRight: 'chevron-right',
+  close: 'close',
+  error: 'error',
+  grid: 'grid-view',
+  heart: 'favorite',
+  home: 'home',
+  info: 'info',
+  lock: 'lock',
+  more: 'more-horiz',
+  notification: 'notifications',
+  search: 'search',
+  settings: 'settings',
+  share: 'share',
+  star: 'star',
+  trash: 'delete',
+  user: 'person',
+  warning: 'warning',
+} as const satisfies Record<IconName, string>

package/src/atoms/icon/icon.android.tsx

@@ -0,0 +1,17 @@
+import MaterialIcons from '@expo/vector-icons/MaterialIcons'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useHostGuard} from '../../host-context'
+import {RnView} from '../rn-view'
+import type {IconComponent, IconProps} from './icon.types'
+import {MATERIAL_ICONS} from './icon-names'
+
+export const Icon: IconComponent = ({color = 'content.primary', name, size = 's24', testID}: IconProps) => {
+  useHostGuard('Icon')
+  const theme = useAppTheme()
+
+  return (
+    <RnView>
+      <MaterialIcons color={theme.color(color)} name={MATERIAL_ICONS[name]} size={spacing[size]} testID={testID} />
+    </RnView>
+  )
+}

package/src/atoms/icon/icon.ios.tsx

@@ -0,0 +1,15 @@
+import {Image} from '@expo/ui/swift-ui'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import type {SFSymbol} from 'sf-symbols-typescript'
+import {useHostGuard} from '../../host-context'
+import type {IconComponent, IconProps} from './icon.types'
+import {SF_SYMBOLS} from './icon-names'
+
+export const Icon: IconComponent = ({color = 'content.primary', name, size = 's24', testID}: IconProps) => {
+  useHostGuard('Icon')
+  const theme = useAppTheme()
+
+  return (
+    <Image color={theme.color(color)} size={spacing[size]} systemName={SF_SYMBOLS[name] as SFSymbol} testID={testID} />
+  )
+}

package/src/atoms/icon/icon.types.ts

@@ -0,0 +1,36 @@
+import type {ColorToken, SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type IconName =
+  | 'add'
+  | 'arrowLeft'
+  | 'arrowRight'
+  | 'calendar'
+  | 'check'
+  | 'chevronDown'
+  | 'chevronRight'
+  | 'close'
+  | 'error'
+  | 'grid'
+  | 'heart'
+  | 'home'
+  | 'info'
+  | 'lock'
+  | 'more'
+  | 'notification'
+  | 'search'
+  | 'settings'
+  | 'share'
+  | 'star'
+  | 'trash'
+  | 'user'
+  | 'warning'
+
+export type IconProps = {
+  color?: ColorToken
+  name: IconName
+  size?: SpaceSize
+  testID?: string
+}
+
+export type IconComponent = (props: IconProps) => ReactNode

package/src/atoms/icon/index.ts

@@ -0,0 +1,3 @@
+export * from './icon'
+export * from './icon.types'
+export * from './icon-names'