nextjs-slides 0.1.0

package/README.md

@@ -0,0 +1,184 @@
+# nextjs-slides
+
+Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS v4, and sugar-high syntax highlighting.
+
+Build full presentations from React components with URL-based routing, keyboard navigation, progress indicators, and smooth slide transitions — all declarative.
+
+## Install
+
+```bash
+npm install nextjs-slides
+```
+
+Peer dependencies: `next >=15`, `react >=19`, `tailwindcss >=4`.
+
+## Quick Start
+
+### 1. Import the stylesheet
+
+In your root layout or global CSS:
+
+```css
+@import "nextjs-slides/styles.css";
+```
+
+### 2. Define your slides
+
+```tsx
+// app/slides/slides.tsx
+import {
+  Slide,
+  SlideTitle,
+  SlideSubtitle,
+  SlideBadge,
+  SlideCode,
+} from "nextjs-slides";
+
+export const slides = [
+  <Slide key="intro">
+    <SlideBadge>Welcome</SlideBadge>
+    <SlideTitle>My Presentation</SlideTitle>
+    <SlideSubtitle>Built with nextjs-slides</SlideSubtitle>
+  </Slide>,
+
+  <Slide key="code" align="left">
+    <SlideTitle>Code Example</SlideTitle>
+    <SlideCode title="hello.ts">{`const greeting = "Hello, world!";
+console.log(greeting);`}</SlideCode>
+  </Slide>,
+];
+```
+
+### 3. Create the layout (provider)
+
+```tsx
+// app/slides/layout.tsx
+"use client";
+
+import { SlideDeck } from "nextjs-slides";
+import { slides } from "./slides";
+
+export default function SlidesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <SlideDeck slides={slides}>{children}</SlideDeck>;
+}
+```
+
+### 4. Add the routes
+
+```tsx
+// app/slides/page.tsx
+import { redirect } from "next/navigation";
+
+export default function SlidesPage() {
+  redirect("/slides/1");
+}
+```
+
+```tsx
+// app/slides/[page]/page.tsx
+import { getSlide, generateSlideParams } from "nextjs-slides";
+import { slides } from "../slides";
+
+export const generateStaticParams = () => generateSlideParams(slides);
+
+export default async function SlidePage({
+  params,
+}: {
+  params: Promise<{ page: string }>;
+}) {
+  return getSlide(await params, slides);
+}
+```
+
+That's it. Navigate to `/slides` and you have a full slide deck.
+
+## `<SlideDeck>` Props
+
+| Prop           | Type              | Default      | Description                             |
+| -------------- | ----------------- | ------------ | --------------------------------------- |
+| `slides`       | `ReactNode[]`     | **required** | Your slides array                       |
+| `basePath`     | `string`          | `"/slides"`  | URL prefix for slide routes             |
+| `showProgress` | `boolean`         | `true`       | Show dot progress indicator             |
+| `showCounter`  | `boolean`         | `true`       | Show "3 / 10" counter                   |
+| `className`    | `string`          | —            | Additional class for the deck container |
+| `children`     | `React.ReactNode` | **required** | Route content (from Next.js)            |
+
+## Primitives
+
+### Layout
+
+- **`<Slide>`** — Full-screen slide container with decorative border. Props: `align` (`"center"` | `"left"`), `className`.
+- **`<SlideSplitLayout>`** — Two-column layout with vertical divider. Props: `left`, `right`, `className`.
+
+### Typography
+
+- **`<SlideTitle>`** — Large bold heading (responsive h1).
+- **`<SlideSubtitle>`** — Muted secondary text.
+- **`<SlideBadge>`** — Inverted pill badge.
+- **`<SlideHeaderBadge>`** — Italic accent label.
+- **`<SlideNote>`** — Small muted footnote.
+
+### Content
+
+- **`<SlideCode>`** — Syntax-highlighted code block (sugar-high). Props: `title`, `className`. Pass code as `children` string.
+- **`<SlideList>`** / **`<SlideListItem>`** — Bullet list.
+- **`<SlideDemo>`** — Interactive component container. Keyboard/click navigation is disabled inside. Props: `label`, `className`.
+
+### Structured
+
+- **`<SlideStatementList>`** / **`<SlideStatement>`** — Title + description pairs with border separators.
+- **`<SlideSpeaker>`** — Avatar + name + title row.
+- **`<SlideSpeakerGrid>`** — 2-column speaker grid.
+- **`<SlideSpeakerList>`** — Vertical speaker stack.
+
+### Navigation
+
+- **`<SlideLink>`** — Styled link for navigation. Props: `href`, `variant` (`"primary"` | `"ghost"`), `className`.
+
+## Keyboard Navigation
+
+| Key          | Action         |
+| ------------ | -------------- |
+| `→` or Space | Next slide     |
+| `←`          | Previous slide |
+
+Interactive areas (`<SlideDemo>`, inputs, textareas) don't trigger navigation.
+
+## Custom Base Path
+
+Host slides at a different URL:
+
+```tsx
+<SlideDeck slides={slides} basePath="/deck">
+  {children}
+</SlideDeck>
+```
+
+Then route at `/deck/[page]/page.tsx`.
+
+## Breakout Pages
+
+Pages inside the slides folder but outside the `[page]` route render without deck navigation — useful for live demos:
+
+```
+app/slides/
+  layout.tsx          ← SlideDeck provider
+  [page]/page.tsx     ← Slide routes
+  demo/page.tsx       ← Breakout page (no deck chrome)
+```
+
+## Tailwind CSS
+
+The primitives use Tailwind utility classes with standard CSS variable tokens (`--foreground`, `--background`, `--muted-foreground`, `--primary`, etc.). These are compatible with shadcn/ui themes or any Tailwind v4 setup that defines these variables.
+
+## Animations
+
+Slide transitions use the React 19 `<ViewTransition>` component with `addTransitionType()`. The CSS in `nextjs-slides/styles.css` defines the `::view-transition-*` animations. Override them in your own CSS to customize.
+
+## License
+
+MIT

package/dist/cn.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/cn.js

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/get-slide.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Resolves the current slide from params and the slides array.
+ * Use in your `[page]/page.tsx` dynamic route.
+ *
+ * @example
+ * ```tsx
+ * import { getSlide } from 'nextjs-slides';
+ * import { slides } from '../slides';
+ *
+ * export default async function SlidePage({ params }: { params: Promise<{ page: string }> }) {
+ *   return getSlide(await params, slides);
+ * }
+ * ```
+ */
+declare function getSlide(params: {
+    page: string;
+}, slides: React.ReactNode[]): React.ReactNode;
+/**
+ * Generates static params for all slides. Use with `generateStaticParams`.
+ *
+ * @example
+ * ```tsx
+ * import { generateSlideParams } from 'nextjs-slides';
+ * import { slides } from '../slides';
+ *
+ * export const generateStaticParams = () => generateSlideParams(slides);
+ * ```
+ */
+declare function generateSlideParams(slides: React.ReactNode[]): {
+    page: string;
+}[];
+
+export { generateSlideParams, getSlide };

package/dist/get-slide.js

@@ -0,0 +1,16 @@
+import { notFound } from "next/navigation";
+function getSlide(params, slides) {
+  const index = Number(params.page) - 1;
+  if (isNaN(index) || index < 0 || index >= slides.length) {
+    notFound();
+  }
+  return slides[index];
+}
+function generateSlideParams(slides) {
+  return slides.map((_, i) => ({ page: String(i + 1) }));
+}
+export {
+  generateSlideParams,
+  getSlide
+};
+//# sourceMappingURL=get-slide.js.map

package/dist/get-slide.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/get-slide.tsx"],"sourcesContent":["import { notFound } from 'next/navigation';\n\n/**\n * Resolves the current slide from params and the slides array.\n * Use in your `[page]/page.tsx` dynamic route.\n *\n * @example\n * ```tsx\n * import { getSlide } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export default async function SlidePage({ params }: { params: Promise<{ page: string }> }) {\n *   return getSlide(await params, slides);\n * }\n * ```\n */\nexport function getSlide(params: { page: string }, slides: React.ReactNode[]): React.ReactNode {\n  const index = Number(params.page) - 1;\n\n  if (isNaN(index) || index < 0 || index >= slides.length) {\n    notFound();\n  }\n\n  return slides[index];\n}\n\n/**\n * Generates static params for all slides. Use with `generateStaticParams`.\n *\n * @example\n * ```tsx\n * import { generateSlideParams } from 'nextjs-slides';\n * import { slides } from '../slides';\n *\n * export const generateStaticParams = () => generateSlideParams(slides);\n * ```\n */\nexport function generateSlideParams(slides: React.ReactNode[]) {\n  return slides.map((_, i) => ({ page: String(i + 1) }));\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AAgBlB,SAAS,SAAS,QAA0B,QAA4C;AAC7F,QAAM,QAAQ,OAAO,OAAO,IAAI,IAAI;AAEpC,MAAI,MAAM,KAAK,KAAK,QAAQ,KAAK,SAAS,OAAO,QAAQ;AACvD,aAAS;AAAA,EACX;AAEA,SAAO,OAAO,KAAK;AACrB;AAaO,SAAS,oBAAoB,QAA2B;AAC7D,SAAO,OAAO,IAAI,CAAC,GAAG,OAAO,EAAE,MAAM,OAAO,IAAI,CAAC,EAAE,EAAE;AACvD;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { SlideDeck } from './slide-deck.js';
+export { generateSlideParams, getSlide } from './get-slide.js';
+export { Slide, SlideBadge, SlideCode, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle } from './primitives.js';
+export { SlideLink } from './slide-link.js';
+export { SlideAlign, SlideDeckConfig, SlideLinkVariant } from './types.js';
+import 'react/jsx-runtime';

package/dist/index.js

@@ -0,0 +1,31 @@
+import { SlideDeck } from "./slide-deck";
+import { getSlide, generateSlideParams } from "./get-slide";
+import { Slide, SlideSplitLayout } from "./primitives";
+import { SlideTitle, SlideSubtitle, SlideBadge, SlideHeaderBadge, SlideNote } from "./primitives";
+import { SlideCode, SlideList, SlideListItem, SlideDemo } from "./primitives";
+import { SlideStatementList, SlideStatement } from "./primitives";
+import { SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList } from "./primitives";
+import { SlideLink } from "./slide-link";
+export {
+  Slide,
+  SlideBadge,
+  SlideCode,
+  SlideDeck,
+  SlideDemo,
+  SlideHeaderBadge,
+  SlideLink,
+  SlideList,
+  SlideListItem,
+  SlideNote,
+  SlideSpeaker,
+  SlideSpeakerGrid,
+  SlideSpeakerList,
+  SlideSplitLayout,
+  SlideStatement,
+  SlideStatementList,
+  SlideSubtitle,
+  SlideTitle,
+  generateSlideParams,
+  getSlide
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Provider\nexport { SlideDeck } from './slide-deck';\n\n// Routing helpers\nexport { getSlide, generateSlideParams } from './get-slide';\n\n// Primitives — Layout\nexport { Slide, SlideSplitLayout } from './primitives';\n\n// Primitives — Typography\nexport { SlideTitle, SlideSubtitle, SlideBadge, SlideHeaderBadge, SlideNote } from './primitives';\n\n// Primitives — Content\nexport { SlideCode, SlideList, SlideListItem, SlideDemo } from './primitives';\n\n// Primitives — Statements\nexport { SlideStatementList, SlideStatement } from './primitives';\n\n// Primitives — Speakers\nexport { SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList } from './primitives';\n\n// Navigation\nexport { SlideLink } from './slide-link';\n\n// Types\nexport type { SlideAlign, SlideLinkVariant, SlideDeckConfig } from './types';\n"],"mappings":"AACA,SAAS,iBAAiB;AAG1B,SAAS,UAAU,2BAA2B;AAG9C,SAAS,OAAO,wBAAwB;AAGxC,SAAS,YAAY,eAAe,YAAY,kBAAkB,iBAAiB;AAGnF,SAAS,WAAW,WAAW,eAAe,iBAAiB;AAG/D,SAAS,oBAAoB,sBAAsB;AAGnD,SAAS,cAAc,kBAAkB,wBAAwB;AAGjE,SAAS,iBAAiB;","names":[]}

package/dist/primitives.d.ts

@@ -0,0 +1,75 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SlideAlign } from './types.js';
+
+declare function Slide({ children, align, className, }: {
+    children: React.ReactNode;
+    align?: SlideAlign;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideSplitLayout({ left, right, className, }: {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideTitle({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideSubtitle({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideBadge({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideHeaderBadge({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideCode({ children, className, title }: {
+    children: string;
+    className?: string;
+    title?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideList({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideListItem({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideNote({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideDemo({ children, className, label, }: {
+    children: React.ReactNode;
+    className?: string;
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideStatementList({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideStatement({ title, description, className, }: {
+    title: string;
+    description?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideSpeaker({ name, title, className }: {
+    name: string;
+    title: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideSpeakerGrid({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SlideSpeakerList({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Slide, SlideBadge, SlideCode, SlideDemo, SlideHeaderBadge, SlideList, SlideListItem, SlideNote, SlideSpeaker, SlideSpeakerGrid, SlideSpeakerList, SlideSplitLayout, SlideStatement, SlideStatementList, SlideSubtitle, SlideTitle };

package/dist/primitives.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { highlight } from "sugar-high";
+import { cn } from "./cn";
+import { SlideDemoContent } from "./slide-demo-content";
+function Slide({
+  children,
+  align = "center",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "nxs-slide relative flex h-dvh w-dvw flex-col justify-center gap-8 px-12 py-20 sm:px-24 md:px-32 lg:px-40",
+        align === "center" && "items-center text-center",
+        align === "left" && "items-start text-left",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex max-w-4xl flex-col gap-6",
+              align === "center" && "items-center",
+              align === "left" && "items-start"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function SlideSplitLayout({
+  left,
+  right,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("nxs-slide relative flex h-dvh w-dvw", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24", children: left }),
+    /* @__PURE__ */ jsx("div", { className: "bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-1/2 flex-col justify-center", children: right })
+  ] });
+}
+function SlideTitle({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn("text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl", className),
+      style: { letterSpacing: "-0.04em" },
+      children
+    }
+  );
+}
+function SlideSubtitle({ children, className }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-lg sm:text-xl md:text-2xl", className), children });
+}
+function SlideBadge({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "bg-foreground text-background inline-block rounded-full px-4 py-1.5 text-sm font-semibold tracking-wide",
+        className
+      ),
+      children
+    }
+  );
+}
+function SlideHeaderBadge({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3", className), children: /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl font-semibold tracking-tight italic sm:text-2xl", children }) });
+}
+function SlideCode({ children, className, title }) {
+  const html = highlight(children);
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-2xl", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: title }),
+    /* @__PURE__ */ jsx("pre", { className: "nxs-code-block border-foreground/10 bg-foreground/[0.03] overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm", children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: html } }) })
+  ] });
+}
+function SlideList({ children, className }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col gap-4 text-left", className), children });
+}
+function SlideListItem({ children, className }) {
+  return /* @__PURE__ */ jsxs("li", { className: cn("text-foreground/70 flex items-start gap-3 text-lg sm:text-xl", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function SlideNote({ children, className }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground/50 mt-4 text-sm", className), children });
+}
+function SlideDemo({
+  children,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slide-interactive": true, className: cn("w-full max-w-2xl", className), children: [
+    label && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "border-foreground/10 bg-foreground/[0.03] border p-6", children: /* @__PURE__ */ jsx(SlideDemoContent, { children }) })
+  ] });
+}
+function SlideStatementList({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col", className), children });
+}
+function SlideStatement({
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16", className), children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-bold sm:text-xl md:text-2xl", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-sm sm:text-base", children: description })
+  ] });
+}
+function SlideSpeaker({ name, title, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-muted h-12 w-12 shrink-0 rounded-full", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-foreground/90 text-sm font-medium tracking-widest uppercase", children: name }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm tracking-wider uppercase", children: title })
+    ] })
+  ] });
+}
+function SlideSpeakerGrid({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", className), children });
+}
+function SlideSpeakerList({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-6", className), children });
+}
+export {
+  Slide,
+  SlideBadge,
+  SlideCode,
+  SlideDemo,
+  SlideHeaderBadge,
+  SlideList,
+  SlideListItem,
+  SlideNote,
+  SlideSpeaker,
+  SlideSpeakerGrid,
+  SlideSpeakerList,
+  SlideSplitLayout,
+  SlideStatement,
+  SlideStatementList,
+  SlideSubtitle,
+  SlideTitle
+};
+//# sourceMappingURL=primitives.js.map

package/dist/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives.tsx"],"sourcesContent":["import { highlight } from 'sugar-high';\nimport { cn } from './cn';\nimport { SlideDemoContent } from './slide-demo-content';\nimport type { SlideAlign } from './types';\n\nexport function Slide({\n  children,\n  align = 'center',\n  className,\n}: {\n  children: React.ReactNode;\n  align?: SlideAlign;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        'nxs-slide relative flex h-dvh w-dvw flex-col justify-center gap-8 px-12 py-20 sm:px-24 md:px-32 lg:px-40',\n        align === 'center' && 'items-center text-center',\n        align === 'left' && 'items-start text-left',\n        className,\n      )}\n    >\n      <div className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\" aria-hidden />\n      <div\n        className={cn(\n          'relative z-10 flex max-w-4xl flex-col gap-6',\n          align === 'center' && 'items-center',\n          align === 'left' && 'items-start',\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function SlideSplitLayout({\n  left,\n  right,\n  className,\n}: {\n  left: React.ReactNode;\n  right: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('nxs-slide relative flex h-dvh w-dvw', className)}>\n      <div className=\"border-foreground/10 pointer-events-none absolute inset-4 border sm:inset-6\" aria-hidden />\n      <div className=\"relative z-10 flex w-1/2 flex-col justify-center px-12 py-20 sm:px-16 md:px-20 lg:px-24\">\n        {left}\n      </div>\n      <div className=\"bg-foreground/10 absolute top-4 bottom-4 left-1/2 z-10 w-px sm:top-6 sm:bottom-6\" aria-hidden />\n      <div className=\"relative z-10 flex w-1/2 flex-col justify-center\">{right}</div>\n    </div>\n  );\n}\n\nexport function SlideTitle({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <h1\n      className={cn('text-foreground text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl', className)}\n      style={{ letterSpacing: '-0.04em' }}\n    >\n      {children}\n    </h1>\n  );\n}\n\nexport function SlideSubtitle({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <p className={cn('text-muted-foreground text-lg sm:text-xl md:text-2xl', className)}>{children}</p>;\n}\n\nexport function SlideBadge({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <span\n      className={cn(\n        'bg-foreground text-background inline-block rounded-full px-4 py-1.5 text-sm font-semibold tracking-wide',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport function SlideHeaderBadge({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={cn('flex items-center gap-3', className)}>\n      <span className=\"text-foreground text-xl font-semibold tracking-tight italic sm:text-2xl\">{children}</span>\n    </div>\n  );\n}\n\nexport function SlideCode({ children, className, title }: { children: string; className?: string; title?: string }) {\n  const html = highlight(children);\n\n  return (\n    <div className={cn('w-full max-w-2xl', className)}>\n      {title && <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">{title}</div>}\n      <pre className=\"nxs-code-block border-foreground/10 bg-foreground/[0.03] overflow-x-auto border p-6 text-left font-mono text-[13px] leading-[1.7] sm:text-sm\">\n        <code dangerouslySetInnerHTML={{ __html: html }} />\n      </pre>\n    </div>\n  );\n}\n\nexport function SlideList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <ul className={cn('flex flex-col gap-4 text-left', className)}>{children}</ul>;\n}\n\nexport function SlideListItem({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <li className={cn('text-foreground/70 flex items-start gap-3 text-lg sm:text-xl', className)}>\n      <span className=\"bg-foreground/40 mt-2 block h-1.5 w-1.5 shrink-0 rounded-full\" aria-hidden />\n      <span>{children}</span>\n    </li>\n  );\n}\n\nexport function SlideNote({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <p className={cn('text-muted-foreground/50 mt-4 text-sm', className)}>{children}</p>;\n}\n\nexport function SlideDemo({\n  children,\n  className,\n  label,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  label?: string;\n}) {\n  return (\n    <div data-slide-interactive className={cn('w-full max-w-2xl', className)}>\n      {label && <div className=\"text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase\">{label}</div>}\n      <div className=\"border-foreground/10 bg-foreground/[0.03] border p-6\">\n        <SlideDemoContent>{children}</SlideDemoContent>\n      </div>\n    </div>\n  );\n}\n\nexport function SlideStatementList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('flex w-full flex-col', className)}>{children}</div>;\n}\n\nexport function SlideStatement({\n  title,\n  description,\n  className,\n}: {\n  title: string;\n  description?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn('border-foreground/10 border-t px-8 py-8 last:border-b sm:px-12 md:px-16', className)}>\n      <h3 className=\"text-foreground text-lg font-bold sm:text-xl md:text-2xl\">{title}</h3>\n      {description && <p className=\"text-muted-foreground mt-1 text-sm sm:text-base\">{description}</p>}\n    </div>\n  );\n}\n\nexport function SlideSpeaker({ name, title, className }: { name: string; title: string; className?: string }) {\n  return (\n    <div className={cn('flex items-center gap-4', className)}>\n      <div className=\"bg-muted h-12 w-12 shrink-0 rounded-full\" aria-hidden />\n      <div>\n        <p className=\"text-foreground/90 text-sm font-medium tracking-widest uppercase\">{name}</p>\n        <p className=\"text-muted-foreground text-sm tracking-wider uppercase\">{title}</p>\n      </div>\n    </div>\n  );\n}\n\nexport function SlideSpeakerGrid({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('grid grid-cols-1 gap-6 sm:grid-cols-2', className)}>{children}</div>;\n}\n\nexport function SlideSpeakerList({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <div className={cn('flex flex-col gap-6', className)}>{children}</div>;\n}\n"],"mappings":"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","names":[]}

package/dist/slide-deck.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SlideDeckConfig } from './types.js';
+
+declare function SlideDeck({ children, slides, basePath, showProgress, showCounter, className, }: SlideDeckConfig & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { SlideDeck };

package/dist/slide-deck.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter } from "next/navigation";
+import { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from "react";
+import { cn } from "./cn";
+function SlideDeck({
+  children,
+  slides,
+  basePath = "/slides",
+  showProgress = true,
+  showCounter = true,
+  className
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isPending, startTransition] = useTransition();
+  const total = slides.length;
+  const slideRoutePattern = new RegExp(`^${basePath}/(\\d+)$`);
+  const isSlideRoute = slideRoutePattern.test(pathname);
+  const current = (() => {
+    const match = pathname.match(slideRoutePattern);
+    return match ? Number(match[1]) - 1 : 0;
+  })();
+  const goTo = useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(index, total - 1));
+      if (clamped === current) return;
+      startTransition(() => {
+        addTransitionType(clamped > current ? "slide-forward" : "slide-back");
+        router.push(`${basePath}/${clamped + 1}`);
+      });
+    },
+    [basePath, current, router, startTransition, total]
+  );
+  useEffect(() => {
+    if (!isSlideRoute) return;
+    if (current > 0) router.prefetch(`${basePath}/${current}`);
+    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);
+  }, [basePath, current, isSlideRoute, router, total]);
+  useEffect(() => {
+    if (!isSlideRoute) return;
+    function onKeyDown(e) {
+      const target = e.target;
+      if (target.closest("[data-slide-interactive]") || target.matches('input, textarea, select, [contenteditable="true"]')) {
+        return;
+      }
+      if (e.key === "ArrowRight" || e.key === " ") {
+        e.preventDefault();
+        goTo(current + 1);
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goTo(current - 1);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [current, goTo, isSlideRoute]);
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(ViewTransition, { exit: "deck-unveil", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "slide-deck",
+      className: cn(
+        "bg-background text-foreground fixed inset-0 z-50 overflow-hidden font-sans select-none",
+        className
+      ),
+      "data-pending": isPending ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          ViewTransition,
+          {
+            enter: {
+              default: "slide-from-right",
+              "slide-back": "slide-from-left",
+              "slide-forward": "slide-from-right"
+            },
+            exit: {
+              default: "slide-to-left",
+              "slide-back": "slide-to-right",
+              "slide-forward": "slide-to-left"
+            },
+            children: /* @__PURE__ */ jsx("div", { children })
+          },
+          pathname
+        ),
+        isSlideRoute && showProgress && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5",
+            "aria-label": "Slide progress",
+            children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-1 transition-all duration-300",
+                  i === current ? "bg-foreground w-6" : "bg-foreground/20 w-1"
+                )
+              },
+              i
+            ))
+          }
+        ),
+        isSlideRoute && showCounter && /* @__PURE__ */ jsxs("div", { className: "text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider", children: [
+          current + 1,
+          " / ",
+          total
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  SlideDeck
+};
+//# sourceMappingURL=slide-deck.js.map

package/dist/slide-deck.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slide-deck.tsx"],"sourcesContent":["'use client';\n\nimport { usePathname, useRouter } from 'next/navigation';\nimport { addTransitionType, useCallback, useEffect, useTransition, ViewTransition } from 'react';\nimport { cn } from './cn';\nimport type { SlideDeckConfig } from './types';\n\nexport function SlideDeck({\n  children,\n  slides,\n  basePath = '/slides',\n  showProgress = true,\n  showCounter = true,\n  className,\n}: SlideDeckConfig & { children: React.ReactNode }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const [isPending, startTransition] = useTransition();\n\n  const total = slides.length;\n  const slideRoutePattern = new RegExp(`^${basePath}/(\\\\d+)$`);\n  const isSlideRoute = slideRoutePattern.test(pathname);\n  const current = (() => {\n    const match = pathname.match(slideRoutePattern);\n    return match ? Number(match[1]) - 1 : 0;\n  })();\n\n  const goTo = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, total - 1));\n      if (clamped === current) return;\n      startTransition(() => {\n        addTransitionType(clamped > current ? 'slide-forward' : 'slide-back');\n        router.push(`${basePath}/${clamped + 1}`);\n      });\n    },\n    [basePath, current, router, startTransition, total],\n  );\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    if (current > 0) router.prefetch(`${basePath}/${current}`);\n    if (current < total - 1) router.prefetch(`${basePath}/${current + 2}`);\n  }, [basePath, current, isSlideRoute, router, total]);\n\n  useEffect(() => {\n    if (!isSlideRoute) return;\n    function onKeyDown(e: KeyboardEvent) {\n      const target = e.target as HTMLElement;\n      if (\n        target.closest('[data-slide-interactive]') ||\n        target.matches('input, textarea, select, [contenteditable=\"true\"]')\n      ) {\n        return;\n      }\n      if (e.key === 'ArrowRight' || e.key === ' ') {\n        e.preventDefault();\n        goTo(current + 1);\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        goTo(current - 1);\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [current, goTo, isSlideRoute]);\n\n  useEffect(() => {\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, []);\n\n  return (\n    <ViewTransition exit=\"deck-unveil\">\n      <div\n        id=\"slide-deck\"\n        className={cn(\n          'bg-background text-foreground fixed inset-0 z-50 overflow-hidden font-sans select-none',\n          className,\n        )}\n        data-pending={isPending ? '' : undefined}\n      >\n        <ViewTransition\n          key={pathname}\n          enter={{\n            default: 'slide-from-right',\n            'slide-back': 'slide-from-left',\n            'slide-forward': 'slide-from-right',\n          }}\n          exit={{\n            default: 'slide-to-left',\n            'slide-back': 'slide-to-right',\n            'slide-forward': 'slide-to-left',\n          }}\n        >\n          <div>{children}</div>\n        </ViewTransition>\n\n        {isSlideRoute && showProgress && (\n          <div\n            className=\"fixed bottom-8 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1.5\"\n            aria-label=\"Slide progress\"\n          >\n            {Array.from({ length: total }).map((_, i) => (\n              <div\n                key={i}\n                className={cn(\n                  'h-1 transition-all duration-300',\n                  i === current ? 'bg-foreground w-6' : 'bg-foreground/20 w-1',\n                )}\n              />\n            ))}\n          </div>\n        )}\n\n        {isSlideRoute && showCounter && (\n          <div className=\"text-foreground/30 fixed right-8 bottom-8 z-50 font-mono text-xs tracking-wider\">\n            {current + 1} / {total}\n          </div>\n        )}\n      </div>\n    </ViewTransition>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/slide-demo-content.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SlideDemoContent({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { SlideDemoContent };

package/dist/slide-demo-content.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function SlideDemoContent({ children }) {
+  const ref = useRef(null);
+  const [minHeight, setMinHeight] = useState(void 0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const height = entry.borderBoxSize[0].blockSize;
+        setMinHeight((prev) => prev === void 0 ? height : Math.max(prev, height));
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref, style: minHeight !== void 0 ? { minHeight } : void 0, children });
+}
+export {
+  SlideDemoContent
+};
+//# sourceMappingURL=slide-demo-content.js.map

package/dist/slide-demo-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slide-demo-content.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nexport function SlideDemoContent({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [minHeight, setMinHeight] = useState<number | undefined>(undefined);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const height = entry.borderBoxSize[0].blockSize;\n        setMinHeight(prev => (prev === undefined ? height : Math.max(prev, height)));\n      }\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} style={minHeight !== undefined ? { minHeight } : undefined}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAuBI;AArBJ,SAAS,WAAW,QAAQ,gBAAgB;AAErC,SAAS,iBAAiB,EAAE,SAAS,GAAkC;AAC5E,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,MAAS;AAExE,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI,eAAe,aAAW;AAC7C,iBAAW,SAAS,SAAS;AAC3B,cAAM,SAAS,MAAM,cAAc,CAAC,EAAE;AACtC,qBAAa,UAAS,SAAS,SAAY,SAAS,KAAK,IAAI,MAAM,MAAM,CAAE;AAAA,MAC7E;AAAA,IACF,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,SAAI,KAAU,OAAO,cAAc,SAAY,EAAE,UAAU,IAAI,QAC7D,UACH;AAEJ;","names":[]}

package/dist/slide-link.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SlideLinkVariant } from './types.js';
+
+declare function SlideLink({ href, children, className, variant, }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    variant?: SlideLinkVariant;
+}): react_jsx_runtime.JSX.Element;
+
+export { SlideLink };

package/dist/slide-link.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { cn } from "./cn";
+function SlideLink({
+  href,
+  children,
+  className,
+  variant = "primary"
+}) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      className: cn(
+        "nxs-slide-link inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium tracking-wide transition-all",
+        variant === "primary" && "bg-primary text-primary-foreground hover:bg-primary/80",
+        variant === "ghost" && "border-border border bg-transparent hover:bg-muted",
+        "mt-2",
+        className
+      ),
+      children
+    }
+  );
+}
+export {
+  SlideLink
+};
+//# sourceMappingURL=slide-link.js.map

package/dist/slide-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slide-link.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { cn } from './cn';\nimport type { SlideLinkVariant } from './types';\n\nexport function SlideLink({\n  href,\n  children,\n  className,\n  variant = 'primary',\n}: {\n  href: string;\n  children: React.ReactNode;\n  className?: string;\n  variant?: SlideLinkVariant;\n}) {\n  return (\n    <Link\n      href={href}\n      className={cn(\n        'nxs-slide-link inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium tracking-wide transition-all',\n        variant === 'primary' && 'bg-primary text-primary-foreground hover:bg-primary/80',\n        variant === 'ghost' && 'border-border border bg-transparent hover:bg-muted',\n        'mt-2',\n        className,\n      )}\n    >\n      {children}\n    </Link>\n  );\n}\n"],"mappings":"AAgBI;AAhBJ,OAAO,UAAU;AACjB,SAAS,UAAU;AAGZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY,aAAa;AAAA,QACzB,YAAY,WAAW;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/slides.css

@@ -0,0 +1,105 @@
+/* nextjs-slides — Slide transition animations and code theme tokens */
+
+/* sugar-high code theme — light */
+:root {
+  --sh-class: #7200c4;
+  --sh-identifier: #171717;
+  --sh-keyword: #b32c62;
+  --sh-string: #397c3b;
+  --sh-property: #005ee9;
+  --sh-entity: #005ee9;
+  --sh-jsxliterals: #171717;
+  --sh-sign: #666;
+  --sh-comment: #666666;
+}
+
+/* sugar-high code theme — dark */
+.dark {
+  --sh-class: #b675f1;
+  --sh-identifier: #ededed;
+  --sh-keyword: #f05b8d;
+  --sh-string: #58c760;
+  --sh-property: #62a6ff;
+  --sh-entity: #62a6ff;
+  --sh-jsxliterals: #ededed;
+  --sh-sign: #a1a1a1;
+  --sh-comment: #a1a1a1;
+}
+
+/* Slide transition keyframes */
+@keyframes nxs-fade {
+  from {
+    filter: blur(3px);
+    opacity: 0;
+  }
+  to {
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+@keyframes nxs-slide {
+  from {
+    translate: var(--nxs-slide-offset);
+  }
+  to {
+    translate: 0;
+  }
+}
+
+@keyframes nxs-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--nxs-slide-offset, 60px));
+  }
+}
+
+@keyframes nxs-slide-out {
+  to {
+    opacity: 0;
+    transform: translateX(var(--nxs-slide-offset, -60px));
+  }
+}
+
+@keyframes nxs-deck-unveil {
+  to {
+    opacity: 0;
+    transform: scale(1.03);
+  }
+}
+
+/* Reset default view transition animations */
+::view-transition-old(*) {
+  animation: none;
+}
+::view-transition-new(*) {
+  animation: none;
+}
+
+/* Slide forward */
+::view-transition-new(.slide-from-right) {
+  --nxs-slide-offset: 60px;
+  animation: nxs-slide-in 200ms ease-out both;
+}
+::view-transition-old(.slide-to-left) {
+  --nxs-slide-offset: -60px;
+  animation: nxs-slide-out 200ms ease-out both;
+}
+
+/* Slide backward */
+::view-transition-new(.slide-from-left) {
+  --nxs-slide-offset: -60px;
+  animation: nxs-slide-in 200ms ease-out both;
+}
+::view-transition-old(.slide-to-right) {
+  --nxs-slide-offset: 60px;
+  animation: nxs-slide-out 200ms ease-out both;
+}
+
+/* Deck exit (leaving slide deck) */
+::view-transition-old(.deck-unveil) {
+  animation: nxs-deck-unveil 300ms ease-out both;
+}
+::view-transition-new(.deck-unveil) {
+  animation: none;
+}

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+type SlideAlign = 'center' | 'left';
+type SlideLinkVariant = 'primary' | 'ghost';
+interface SlideDeckConfig {
+    slides: React.ReactNode[];
+    /** Base path for slide URLs. Defaults to "/slides" */
+    basePath?: string;
+    /** Show progress dots at the bottom. Defaults to true */
+    showProgress?: boolean;
+    /** Show slide counter (e.g. "3 / 10"). Defaults to true */
+    showCounter?: boolean;
+    /** Additional className for the deck container */
+    className?: string;
+}
+
+export type { SlideAlign, SlideDeckConfig, SlideLinkVariant };

package/dist/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "nextjs-slides",
+  "version": "0.1.0",
+  "description": "Composable slide deck primitives for Next.js — powered by React 19 ViewTransitions, Tailwind CSS, and sugar-high syntax highlighting.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/slides.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "sugar-high": "^0.9.5",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "nextjs",
+    "slides",
+    "presentation",
+    "slide-deck",
+    "react",
+    "tailwind",
+    "view-transitions",
+    "sugar-high"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aurorascharff/nextjs-slides"
+  }
+}