feat: add Carousel component (#347)

build.washingtonpost.com/docs/components/carousel.mdx

@@ -0,0 +1,67 @@
+---
+title: Carousel
+description: A component for cycling through elements.
+component: carousel
+status: "Draft"
+---
+
+## Options
+
+### Basic
+
+```jsx withPreview
+export default function Example() {
+  const items = [
+    "Card 1 content",
+    "Card 2 content",
+    "Card 3 content",
+    "Card 4 content",
+    "Card 5 content",
+    "Card 6 content",
+  ];
+  return (
+    <Box
+      css={{
+        paddingInline: "$100",
+        width: "100vw",
+      }}
+    >
+      <Carousel.Root itemsPerPage={1}>
+        <Carousel.Header>
+          <Carousel.HeaderContent>
+            <Carousel.Title>Carousel Title</Carousel.Title>
+          </Carousel.HeaderContent>
+          <Carousel.HeaderActions>
+            <Carousel.PreviousButton />
+            <Carousel.NextButton />
+          </Carousel.HeaderActions>
+        </Carousel.Header>
+        <Carousel.Content>
+          {items.map((item) => (
+            <Carousel.Item key={item}>
+              <Card
+                css={{
+                  width: "200px",
+                  height: "175px",
+                  marginInlineEnd: "$025",
+                }}
+              >
+                {item}
+              </Card>
+            </Carousel.Item>
+          ))}
+        </Carousel.Content>
+        <Carousel.Footer>
+          <Carousel.Dots />
+        </Carousel.Footer>
+      </Carousel.Root>
+    </Box>
+  );
+}
+```
+
+---
+
+## API Reference
+
+<PropsTable props={propsTable} />

build.washingtonpost.com/public/sitemap.xml

@@ -36,6 +36,10 @@
     <loc>https://build.washingtonpost.com/components/card</loc>
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/components/carousel</loc>
+  </url>
+
   <url>
     <loc>https://build.washingtonpost.com/components/checkbox</loc>
   </url>

ui/carousel/README.md

@@ -0,0 +1,9 @@
+# Carousel
+
+```jsx
+import { Carousel } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+  return <Carousel />;
+}
+```

ui/carousel/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@washingtonpost/wpds-carousel",
+  "version": "1.1.0",
+  "description": "WPDS Carousel",
+  "author": "WPDS Support <[email protected]>",
+  "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/washingtonpost/wpds-ui-kit.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "tsup src/index.ts --loader .ts=tsx --minify --format esm,cjs --dts --sourcemap --legacy-output --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --legacy-output --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "bugs": {
+    "url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
+  },
+  "devDependencies": {
+    "tsup": "^5.11.13",
+    "typescript": "4.5.5"
+  },
+  "peerDependencies": {
+    "@washingtonpost/wpds-assets": "^1.17.0",
+    "@washingtonpost/wpds-button": "*",
+    "@washingtonpost/wpds-icon": "*",
+    "@washingtonpost/wpds-pagination-dots": "*",
+    "@washingtonpost/wpds-theme": "*",
+    "react": "^16.8.6 || ^17.0.2"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@washingtonpost/wpds-assets": "^1.17.0",
+    "@washingtonpost/wpds-button": "1.1.0",
+    "@washingtonpost/wpds-icon": "1.1.0",
+    "@washingtonpost/wpds-pagination-dots": "1.1.0",
+    "@washingtonpost/wpds-theme": "1.1.0",
+    "nanoid": "^3.3.4",
+    "react-swipeable": "^7.0.0"
+  }
+}