4 files changed, 122 insertions, 0 deletions
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 000000000..14c3177c5
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,107 @@
+import {type ReactNode} from 'react'
+import {View} from 'react-native'
+
+import {
+  atoms as a,
+  flatten,
+  type TextStyleProp,
+  useAlf,
+  useTheme,
+  type ViewStyleProp,
+} from '#/alf'
+import {normalizeTextStyles} from '#/alf/typography'
+
+type SkeletonProps = {
+  blend?: boolean
+}
+
+export function Text({blend, style}: TextStyleProp & SkeletonProps) {
+  const {fonts, flags, theme: t} = useAlf()
+  const {width, ...flattened} = flatten(style)
+  const {lineHeight = 14, ...rest} = normalizeTextStyles(
+    [a.text_sm, a.leading_snug, flattened],
+    {
+      fontScale: fonts.scaleMultiplier,
+      fontFamily: fonts.family,
+      flags,
+    },
+  )
+  return (
+    <View
+      style={[a.flex_1, {maxWidth: width, paddingVertical: lineHeight * 0.15}]}>
+      <View
+        style={[
+          a.rounded_md,
+          t.atoms.bg_contrast_25,
+          {
+            height: lineHeight * 0.7,
+            opacity: blend ? 0.6 : 1,
+          },
+          rest,
+        ]}
+      />
+    </View>
+  )
+}
+
+export function Circle({
+  children,
+  size,
+  blend,
+  style,
+}: ViewStyleProp & {children?: ReactNode; size: number} & SkeletonProps) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.rounded_full,
+        t.atoms.bg_contrast_25,
+        {
+          width: size,
+          height: size,
+          opacity: blend ? 0.6 : 1,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function Pill({
+  size,
+  blend,
+  style,
+}: ViewStyleProp & {size: number} & SkeletonProps) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.rounded_full,
+        t.atoms.bg_contrast_25,
+        {
+          width: size * 1.618,
+          height: size,
+          opacity: blend ? 0.6 : 1,
+        },
+        style,
+      ]}
+    />
+  )
+}
+
+export function Col({
+  children,
+  style,
+}: ViewStyleProp & {children?: React.ReactNode}) {
+  return <View style={[a.flex_1, style]}>{children}</View>
+}
+
+export function Row({
+  children,
+  style,
+}: ViewStyleProp & {children?: React.ReactNode}) {
+  return <View style={[a.flex_row, style]}>{children}</View>
+}
diff --git a/src/components/icons/ArrowTopCircle.tsx b/src/components/icons/ArrowTopCircle.tsx
new file mode 100644
index 000000000..2d250367f
--- /dev/null
+++ b/src/components/icons/ArrowTopCircle.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowTopCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.63 3.225a1 1 0 0 1 1.337.068l3 3 .068.076a1 1 0 0 1-1.406 1.406l-.076-.068L13 10.414V16a1 1 0 1 1-2 0v-5.586l-1.293 1.293a1 1 0 1 1-1.414-1.414l3-3 .076-.068Z',
+})
diff --git a/src/components/icons/CirclePlus.tsx b/src/components/icons/CirclePlus.tsx
new file mode 100644
index 000000000..690e77326
--- /dev/null
+++ b/src/components/icons/CirclePlus.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const CirclePlus_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 3a1 1 0 0 1 1 1v3h3l.102.005a1 1 0 0 1 0 1.99L16 13h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 0 1 0-2h3V8a1 1 0 0 1 1-1Z',
+})
diff --git a/src/components/icons/Tree.tsx b/src/components/icons/Tree.tsx
new file mode 100644
index 000000000..5c2c79872
--- /dev/null
+++ b/src/components/icons/Tree.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Tree_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M6 2a2.998 2.998 0 0 1 1 5.825V8a2 2 0 0 0 2 2h1.174c.412-1.165 1.52-2 2.826-2h5a3 3 0 1 1 0 6h-5a2.998 2.998 0 0 1-2.826-2H9a3.98 3.98 0 0 1-2-.537V16a2 2 0 0 0 2 2h1.174c.412-1.165 1.52-2 2.826-2h5a3 3 0 1 1 0 6h-5a2.998 2.998 0 0 1-2.826-2H9a4 4 0 0 1-4-4V7.825A2.998 2.998 0 0 1 6 2Zm7 16a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Zm0-8a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5ZM6 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z',
+})