{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"horizontalpager-compose","type":"registry:item","title":"HorizontalPager","description":"A Jetpack Compose container for moving through discrete pages with horizontal swipe gestures.","files":[{"path":"snippets/horizontalpager-compose.tsx","content":"import {\n  Box,\n  Column,\n  Host,\n  HorizontalPager,\n  Text,\n  useMaterialColors,\n} from \"@expo/ui/jetpack-compose\";\nimport { background, fillMaxSize, fillMaxWidth, height } from \"@expo/ui/jetpack-compose/modifiers\";\nimport { useState } from \"react\";\n\nexport default function UncontrolledPagerExample() {\n  const colors = useMaterialColors();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [settledPage, setSettledPage] = useState(1);\n\n  return (\n    <Host matchContents={{ vertical: true }} style={{ width: \"100%\" }}>\n      <Column verticalArrangement={{ spacedBy: 12 }} modifiers={[fillMaxWidth()]}>\n        <Text style={{ typography: \"titleLarge\" }} color={colors.onBackground}>\n          currentPage: {currentPage} · settledPage: {settledPage}\n        </Text>\n        <HorizontalPager\n          initialPage={1}\n          onCurrentPageChange={setCurrentPage}\n          onSettledPageChange={setSettledPage}\n          modifiers={[fillMaxWidth(), height(240)]}\n        >\n          <Page label=\"Page 1\" color=\"#6200EE\" />\n          <Page label=\"Page 2\" color=\"#03DAC5\" />\n          <Page label=\"Page 3\" color=\"#FF5722\" />\n        </HorizontalPager>\n      </Column>\n    </Host>\n  );\n}\n\nfunction Page({ label, color }: { label: string; color: string }) {\n  return (\n    <Box modifiers={[fillMaxSize(), background(color)]} contentAlignment=\"center\">\n      <Text color=\"#FFFFFF\" style={{ typography: \"headlineLarge\" }}>\n        {label}\n      </Text>\n    </Box>\n  );\n}\n","type":"registry:file","target":"~/snippets/horizontalpager-compose.tsx"}],"author":"expo","dependencies":["@expo/ui"]}