open-index/open-npm huggingface dataset:
npm package: @rendoc/sdk
Description: Official rendoc SDK for JavaScript/TypeScript - PDF generation API
Latest version: 1.0.0

# rendoc

Official JavaScript/TypeScript SDK for [rendoc](https://rendoc.dev) - PDF generation API.

Zero dependencies. Works with Node.js 18+, Bun, Deno, and browsers.

## Installation

```bash
npm install rendoc
```

## Quick Start

### ESM

```ts
import { Rendoc } from "rendoc";

const client = new Rendoc({ apiKey: "rnd_..." });

// Generate a PDF from markup
const doc = await client.documents.generate({
  markup: "<h1>{{title}}</h1><p>{{body}}</p>",
  data: { title: "Invoice #001", body: "Thank you for your purchase." },
  paperSize: "A4",
  filename: "invoice.pdf",
});

console.log(doc.downloadUrl);
```

### CommonJS

```js
const { Rendoc } = require("rendoc");

const client = new Rendoc({ apiKey: "rnd_..." });
```

## Usage

### Generate a PDF from a template

```ts
const doc = await client.documents.generate({
  templateId: "tmpl_123",
  data: { name: "John Doe", amount: 99.99 },
});
```

### Retrieve a document

```ts
const doc = await client.documents.get("doc_abc123");
```

### List templates

```ts
const templates = await client.templates.list();

// Filter by category
const invoices = await client.templates.list({ category: "INVOICE" });
```

### Create a template

```ts
const template = await client.templates.create({
  name: "Invoice",
  slug: "invoice",
  markup: "<h1>Invoice for {{name}}</h1>",
  schema: { type: "object", properties: { name: { type: "string" } } },
});
```

### Manage API keys

```ts
const keys = await client.apiKeys.list();

const newKey = await client.apiKeys.create({
  name: "production",
  scopes: ["documents:write"],
});
```

### Check usage

```ts
const usage = await client.usage.get();
console.log(`${usage.usage.documents}/${usage.usage.limit} documents used`);

// Historical usage
const jan = await client.usage.get({ year: 2026, month: 1 });
```

## Error Handling

```ts
import { Rendoc, AuthenticationError, RateLimitError } from "rendoc";

try {
  const doc = await client.documents.generate({ ... });
} catch (error) {
  if (error instanceof AuthenticationError) {
    console.error("Invalid API key");
  } else if (error instanceof RateLimitError) {
    console.error("Rate limited, retry later");
  }
}
```

## Custom Base URL

```ts
const client = new Rendoc({
  apiKey: "rnd_...",
  baseUrl: "https://custom.rendoc.dev",
});
```

## Documentation

Full API documentation at [https://rendoc.dev/docs](https://rendoc.dev/docs).

## License

MIT
npm package: @rendr-view/accordion
Description: A flexible React accordion component that handles smooth height transitions and dynamic content resizing.
Latest version: 1.0.2

# @rendr-view/accordion

A flexible React accordion component that handles smooth height transitions and dynamic content resizing.

## 1. Metadata

- **Package Name:** `@rendr-view/accordion`
- **Description:** A smooth, accessible accordion container for React.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `AccordionBox` (Default): The primary accordion container component.

### Props

The `AccordionBox` props extend standard `div` attributes.

```typescript
interface Props {
  opened?: boolean;               // Control whether the accordion is open
  duration?: string;             // CSS duration class (e.g., "duration-700")
  hideOnLoad?: boolean;          // Immediately hide content on initial layout
  alwaysRenderChildren?: boolean; // Keep children in DOM when closed (default: true)
  disableMutationObserver?: boolean; // Disable automatic resizing on content changes
  getInnerContentHeight?: (div: HTMLDivElement) => number | void; // Custom height calculation
}
```

## 3. Implementation Details

- **Dependencies:** `clsx`, `lodash.debounce`
- **Side Effects:** `false`
- **Behavior:** Uses a `MutationObserver` by default to ensure the accordion height stays in sync with dynamic content changes.

## 4. Usage Example

```tsx
import AccordionBox from "@rendr-view/accordion";
import { useState } from "react";

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Accordion
      </button>
      <AccordionBox opened={isOpen} duration="duration-300">
        <div className="p-4 bg-gray-100">
          <p>This is the accordion content.</p>
        </div>
      </AccordionBox>
    </div>
  );
}
```
npm package: @rendr-view/btn
Description: A base button component that works as either a HTML button or a link depending on the given props.
Latest version: 1.0.2

# @rendr-view/btn

A base button component that works as either a HTML button or a link depending on the given props.

## 1. Metadata

- **Package Name:** `@rendr-view/btn`
- **Description:** A flexible, accessible button/link component with icon support.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `Btn` (Default): The primary button component.

### Props

The custom `Btn` props extend the HTML button attributes and HTML anchor link attributes.

```ts
interface Props extends ButtonProps {
  clx?: ClxnObject<ClassNamesList>;
  icon?: React.ComponentType<IconBaseProps>;
  buttonComponent?: React.ComponentType<HTMLButtonType> | "button";
  linkComponent?: React.ComponentType<HTMLLinkType> | "a";
  iconProps?: IconBaseProps;
}
```

#### clx
A record of classNames to style Btn elements: `button`, `enabled`, `disabled`, `label`, `icon`.

## 3. Implementation Details

- **Dependencies:** `@rendr-view/with-clxn`, `clsx`
- **Side Effects:** `false`

## 4. Usage Example

```tsx
import { Btn } from "@rendr-view/btn";
import { AiOutlineArrowRight } from "react-icons/ai";

function App() {
  return (
    <Btn 
      href="/contact" 
      icon={AiOutlineArrowRight}
      clx={{ button: "p-4 bg-primary text-white" }}
    >
      Contact Us
    </Btn>
  );
}
```
npm package: @rendr-view/card
Description: A base "card" component that displays simple content in a simple structure, intended to be highly customisable to generate a lot of varieties.
Latest version: 1.0.3

# @rendr-view/card

A base "card" component that displays simple content in a simple structure, intended to be highly customisable to generate a lot of varieties.

## 1. Metadata

- **Package Name:** `@rendr-view/card`
- **Description:** A highly customizable card component with a flexible, modular structure.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `Card` (Default): The main card component.
- `CardImage`, `CardCategories`, `CardTitle`, `CardSubtitle`, `CardParagraph`, `CardButtons`: Individual section components.

### Props

```ts
export interface Props {
  clx?: object | ClxnLoader;
  className?: string;
  title?: string;
  subtitle?: string;
  text?: string;
  image?: HTMLImageProps;
  buttons?: CardButtonProps[];
  categories?: CardCategory[];
  structure?: CardStructureType;
}
```

## 3. Implementation Details

- **Dependencies:** `@rendr-view/with-clxn`, `clsx`
- **Customizable Structure:** The card's layout is controlled via the `structure` prop, which accepts an array of strings (built-in sections) or React components (custom sections).

## 4. Usage Example

```tsx
import { Card } from "@rendr-view/card";

function App() {
  return (
    <Card
      title="Standard Card"
      text="This is a simple card with an image and a button."
      image={{ src: "https://via.placeholder.com/150", alt: "Placeholder" }}
      buttons={[{ label: "Learn More", href: "#" }]}
      clx={{ card: "border p-4 shadow-sm" }}
    />
  );
}
```

### Advanced: Custom Structure

```tsx
const myStructure = ["title", "image", "buttons"]; // Paragraph and categories removed

return <Card structure={myStructure} title="Custom Layout" />;
```
npm package: @rendr-view/gtm-context
Description: A powerful React context and handler system for managing Google Tag Manager (GTM) events with support for automatic click capturing and nested default event values.
Latest version: 1.0.2

# @rendr-view/gtm-context

A powerful React context and handler system for managing Google Tag Manager (GTM) events with support for automatic click capturing and nested default event values.

## 1. Metadata

- **Package Name:** `@rendr-view/gtm-context`
- **Description:** A robust GTM event management system for React.
- **Category:** Logic / Logic

## 2. API Design

### Exports

- `GTMContext` (Default): The React context.
- `GTMHandler`: The primary provider component with automatic click capture support.
- `gtmPush`: Standalone utility for pushing to `dataLayer`.

### GTMHandler Props

```ts
interface Props {
  captureClicks?: boolean;      // Automatically track clicks with data attributes
  event?: GTMEventDataset;      // Default event data for all nested pushes
  mockPushHandler?: GTMPushFn;  // Custom logger for dev/testing
  transformer?: GTMEventTransformer; // Modify event data before push
}
```

## 3. Implementation Details

- **Nested Defaults:** `GTMHandler` components can be nested; children inherit and merge default event values from parents.
- **Click Capture:** When `captureClicks` is enabled, any element with `data-event-*` attributes will trigger a GTM push on click.

## 4. Usage Example

### Basic Setup

```tsx
import { GTMHandler } from "@rendr-view/gtm-context";

function App() {
  return (
    <GTMHandler event={{ page: "home" }} captureClicks>
      <button 
        data-event-type="click" 
        data-event-category="cta" 
        data-event-label="Sign Up"
      >
        Register Now
      </button>
    </GTMHandler>
  );
}
```

### Manual Push

```tsx
import { useContext } from "react";
import GTMContext from "@rendr-view/gtm-context";

function CustomButton() {
  const { push } = useContext(GTMContext);

  return (
    <button onClick={() => push({ event: "form_submit", status: "success" })}>
      Submit
    </button>
  );
}
```
npm package: @rendr-view/parallaxwipe
Description: A React component that creates a parallax "wipe" effect by toggling between fixed and relative positioning based on scroll position.
Latest version: 1.0.2

# @rendr-view/parallaxwipe

A React component that creates a parallax "wipe" effect by toggling between fixed and relative positioning based on scroll position.

## 1. Metadata

- **Package Name:** `@rendr-view/parallaxwipe`
- **Description:** A parallax container that reveals or hides content with a "wipe" effect.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `ParallaxWipe` (Default): The main parallax container component.

### Props

```ts
interface Props {
  parallaxMode?: "always" | "in" | "out"; // Scroll trigger mode
  className?: string;                      // Outer container class
  innerClassName?: string;                 // Inner overflow container class
  width?: string;                         // Default: "w-screen"
  height?: string;                        // Default: "h-screen"
}
```

## 3. Implementation Details

- **Dependencies:** `@rendr-view/use-scroll-markers`, `clsx`
- **Mechanism:** Uses a scroll event listener and `clipPath: inset(0)` on the outer container to manage the visibility of the inner fixed-positioned content.

## 4. Usage Example

```tsx
import ParallaxWipe from "@rendr-view/parallaxwipe";

function App() {
  return (
    <ParallaxWipe parallaxMode="in" height="h-screen" className="bg-blue-500">
      <div className="flex items-center justify-center h-full">
        <h1 className="text-white text-6xl">Revealed!</h1>
      </div>
    </ParallaxWipe>
  );
}
```
npm package: @rendr-view/portal
Description: A lightweight React portal component for rendering children outside the main DOM hierarchy, typically used for modals, tooltips, and overlays.
Latest version: 1.0.2

# @rendr-view/portal

A lightweight React portal component for rendering children outside the main DOM hierarchy, typically used for modals, tooltips, and overlays.

## 1. Metadata

- **Package Name:** `@rendr-view/portal`
- **Description:** A simple, reusable React portal container.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `Portal` (Default): The portal component.

### Props

```ts
interface Props {
  children: React.ReactNode;
  className?: string; // Class applied to the portal container (Default: "root-portal")
  el?: string;        // HTML element type for the container (Default: "div")
  id?: string;        // Optional ID for the portal container
}
```

## 3. Implementation Details

- **Dependencies:** `react`, `react-dom`
- **Behavior:** Automatically manages the lifecycle of the portal container element in the `document.body`.

## 4. Usage Example

```tsx
import Portal from "@rendr-view/portal";

function MyModal() {
  return (
    <Portal className="my-modal-overlay">
      <div className="modal-content">
        <h2>I am rendered in a Portal!</h2>
      </div>
    </Portal>
  );
}
```
npm package: @rendr-view/rendr-block
Description: A specialized container for rendering Rendr block definitions within the `rendr-view` ecosystem.
Latest version: 1.0.2

# @rendr-view/rendr-block

A specialized container for rendering Rendr block definitions within the `rendr-view` ecosystem.

## 1. Metadata

- **Package Name:** `@rendr-view/rendr-block`
- **Description:** A bridge component for rendering Rendr-compatible content blocks.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `RendrBlock` (Default): The primary block container component.

### Props

The `RendrBlock` props extend standard `section` attributes.

```ts
interface Props {
  blockRenderer?: BlockRenderer; // Function to render individual blocks
  blocks?: BlockDefinition[];    // Array of Rendr block definitions
  clx?: {                        // Style overrides
    block?: string;
    inner?: string;
  };
}
```

## 3. Implementation Details

- **Dependencies:** `@rendr-view/with-clxn`, `clsx`, `@ekino/rendr-template-react` (types), `@ekino/rendr-core` (types)
- **HOC:** Wrapped with `withClxn` for consistent styling support.

## 4. Usage Example

```tsx
import RendrBlock from "@rendr-view/rendr-block";

function Page({ pageBlocks, myRenderer }) {
  return (
    <RendrBlock 
      blocks={pageBlocks} 
      blockRenderer={myRenderer} 
      clx={{ block: "my-custom-section" }}
    />
  );
}
```
npm package: @rendr-view/stagger
Description: A React component for managing sequential, staggered animations using Tailwind utility classes or custom state-based logic.
Latest version: 1.0.2

# @rendr-view/stagger

A React component for managing sequential, staggered animations using Tailwind utility classes or custom state-based logic.

## 1. Metadata

- **Package Name:** `@rendr-view/stagger`
- **Description:** A control component for sequential animations.
- **Category:** Logic

## 2. API Design

### Exports

- `Stagger` (Default): The main control component.

### Props

```ts
interface Props {
  start?: boolean; // Trigger the animation sequence
  step?: StepProp; // Array of { id, in, out } duration objects
  children: (state: { started, ready, unready }) => React.JSX.Element;
}
```

## 3. Implementation Details

- **Dependencies:** `react`
- **Behavior:** Manages a sequential state machine where each "step" is marked as ready/unready based on the defined `in` and `out` durations.

## 4. Usage Example

```tsx
import Stagger from "@rendr-view/stagger";

return (
  <Stagger 
    start={active} 
    step={[
      { id: "header", in: 500 },
      { id: "list", in: 300 }
    ]}
  >
    {({ started, ready }) => (
      <div className={started ? "opacity-100" : "opacity-0"}>
        <h1 className={ready("header") ? "translate-x-0" : "-translate-x-full"}>
          Header
        </h1>
      </div>
    )}
  </Stagger>
);
```
npm package: @rendr-view/text
Description: A base React component for generating semantic text elements and pre-defined typography sets.
Latest version: 1.0.2

# @rendr-view/text

A base React component for generating semantic text elements and pre-defined typography sets.

## 1. Metadata

- **Package Name:** `@rendr-view/text`
- **Description:** A polymorphic text component and typography generator.
- **Category:** UI Primitive

## 2. API Design

### Exports

- `Text` (Default): A polymorphic component for rendering semantic HTML text tags.
- `generateTypography`: A utility to create a set of styled typography components.

### Props

```ts
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  tagName?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "li";
}
```

## 3. Implementation Details

- **Dependencies:** `clsx`, `react`
- **Side Effects:** `false`

## 4. Usage Example

### Polymorphic Text Component

```tsx
import { Text } from "@rendr-view/text";

return <Text tagName="h1">This is a Heading</Text>;
```

### Typography Generator

```tsx
import { generateTypography } from "@rendr-view/text";

const Typography = generateTypography({
  Title: { tagName: "h1", className: "text-4xl font-bold" },
  Body: { tagName: "p", className: "text-base leading-normal" }
});

return (
  <>
    <Typography.Title>Main Title</Typography.Title>
    <Typography.Body>Some body text.</Typography.Body>
  </>
);
```
npm package: @rendr-view/use-dynamic-titlebar
Description: A specialized React hook that updates a title bar component based on the current scroll position within a container, typically used for mobile-style headers.
Latest version: 1.0.2

# @rendr-view/use-dynamic-titlebar

A specialized React hook that updates a title bar component based on the current scroll position within a container, typically used for mobile-style headers.

## 1. Metadata

- **Package Name:** `@rendr-view/use-dynamic-titlebar`
- **Description:** A hook for creating mobile-style dynamic headers that update as you scroll.
- **Category:** Hook

## 2. API Design

### Exports

- `useDynamicTitleBar`: The primary hook.
- `dynamicTitleBar`: Imperative API.

### Hook API

```ts
const { containerRef, titleRef } = useDynamicTitleBar({
  titleBarActiveClassList?: string[]; // Classes to apply when title bar is active
  dataAttribute?: string;            // Attribute used to track titles (Default: "data-title")
});
```

## 3. Implementation Details

- **Dependencies:** `@rendr-view/use-scroll-markers`, `react`
- **Requirement:** Expects a title bar element containing a `[data-title-output]` child to receive the updated text.

## 4. Usage Example

```tsx
import { useDynamicTitleBar } from "@rendr-view/use-dynamic-titlebar";

function Page() {
  const { containerRef, titleRef } = useDynamicTitleBar({
    titleBarActiveClassList: ["is-scrolled"]
  });

  return (
    <div>
      <header ref={titleRef} className="fixed top-0 w-full h-12 bg-white">
        <span data-title-output>Default Title</span>
      </header>
      
      <main ref={containerRef} className="h-screen overflow-y-auto">
        <section data-title="Section 1" className="h-screen">Content 1</section>
        <section data-title="Section 2" className="h-screen">Content 2</section>
      </main>
    </div>
  );
}
```
npm package: @rendr-view/use-fill-available
Description: A React hook that fixes the "100vh" issue on mobile browsers by creating a `--vh` CSS variable that represents 1% of the truly available viewport height.
Latest version: 1.0.2

# @rendr-view/use-fill-available

A React hook that fixes the "100vh" issue on mobile browsers by creating a `--vh` CSS variable that represents 1% of the truly available viewport height.

## 1. Metadata

- **Package Name:** `@rendr-view/use-fill-available`
- **Description:** A hook to ensure accurate full-height layouts on mobile.
- **Category:** Hook

## 2. API Design

### Exports

- `useFillAvailable`: The primary hook.

### Hook API

```ts
useFillAvailable({
  debounce?: number; // Milliseconds to debounce the resize listener (Default: 200)
});
```

## 3. Implementation Details

- **Dependencies:** `lodash.debounce`, `react`
- **Behavior:** Sets a custom CSS property `--vh` on the `document.documentElement`.

## 4. Usage Example

### Tailwind Configuration

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        "fill-available": "calc(var(--vh, 1vh) * 100)"
      }
    }
  }
}
```

### Component Usage

```tsx
import { useFillAvailable } from "@rendr-view/use-fill-available";

function App() {
  useFillAvailable();

  return (
    <div className="h-fill-available bg-primary">
      This container always fills the available viewport height!
    </div>
  );
}
```
npm package: @rendr-view/use-outside-alerter
Description: A React hook that triggers a callback when a user interacts with content outside of a specified element.
Latest version: 1.0.2

# @rendr-view/use-outside-alerter

A React hook that triggers a callback when a user interacts with content outside of a specified element.

## 1. Metadata

- **Package Name:** `@rendr-view/use-outside-alerter`
- **Description:** A hook for detecting clicks or focus changes outside a target element.
- **Category:** Hook

## 2. API Design

### Exports

- `useOutsideAlerter`: The primary hook.

### Hook API

```ts
useOutsideAlerter(
  ref: React.RefObject<HTMLElement>, // Target element ref
  callback: () => void,             // Triggered on outside interaction
  events?: string[]                  // Events to track (Default: ["mouseup"])
);
```

Supported events: `mouseup`, `focus`, `blur`.

## 3. Implementation Details

- **Dependencies:** `lodash.debounce`, `react`
- **Behavior:** Attaches event listeners to the `document` and uses `ref.contains()` to determine if the interaction occurred outside the target.

## 4. Usage Example

```tsx
import { useOutsideAlerter } from "@rendr-view/use-outside-alerter";
import { useRef } from "react";

function Modal({ onClose }) {
  const modalRef = useRef(null);
  
  useOutsideAlerter(modalRef, onClose);

  return (
    <div ref={modalRef} className="bg-white p-8">
      <h2>I am a Modal</h2>
      <button onClick={onClose}>Close</button>
    </div>
  );
}
```
npm package: @rendr-view/use-parallax-container
Description: A React hook that can trigger a callback function when the user interacts with any content _outside_ the target element.
Latest version: 0.0.1-alpha.1

# @rendr-view/use-outside-alerter

A React hook that can trigger a callback function when the user interacts with any content _outside_ the target element.

## Installation

```sh
yarn add @rendr-view/use-outside-alerter
```

## Example usage

```tsx
function Comp() {
  const ref = React.useRef();

  useOutsideAlerter(
    ref,
    () => {
      // the user has clicked outside the modal, you may want to close it
    },
  );

  return <div ref={ref} className="Modal">{...content}</div>
} 
```
npm package: @rendr-view/use-scroll-markers
Description: A powerful React hook for tracking scroll position relative to specific DOM elements, useful for scroll-spies, sticky headers, and reading progress indicators.
Latest version: 1.0.2

# @rendr-view/use-scroll-markers

A powerful React hook for tracking scroll position relative to specific DOM elements, useful for scroll-spies, sticky headers, and reading progress indicators.

## 1. Metadata

- **Package Name:** `@rendr-view/use-scroll-markers`
- **Description:** A scroll-spy and scroll-marker tracking hook.
- **Category:** Hook

## 2. API Design

### Exports

- `useScrollMarkers`: The primary hook.
- `scrollMarkers`: Imperative API for scroll tracking.
- `getScrollPoints`: Utility for calculating element offsets.

### Hook API

```ts
const { currentScrollPoint } = useScrollMarkers({
  selectors: string[];              // CSS selectors to track
  containerRef?: React.RefObject;    // Optional scroll container (Default: window)
  scrollMarkerTransformer?: (el) => any; // Custom data extractor
  onScroll?: (container) => void;    // Scroll callback
});
```

## 3. Implementation Details

- **Dependencies:** `lodash.debounce`, `react`
- **Mechanism:** Uses `MutationObserver` to automatically recalculate scroll points if the DOM changes, ensuring accuracy for dynamic content.

## 4. Usage Example

```tsx
import { useScrollMarkers } from "@rendr-view/use-scroll-markers";

function ReadingProgress() {
  const { currentScrollPoint } = useScrollMarkers({
    selectors: ["h1", "h2", "h3"],
    scrollMarkerTransformer: (el) => ({ title: el.textContent })
  });

  return (
    <div className="fixed top-0 left-0">
      Currently reading: {currentScrollPoint?.title || "Beginning"}
    </div>
  );
}
```
npm package: @rendr-view/use-scrollsnap-controls
Description: A specialized React hook for controlling native CSS `scroll-snap` carousels with precise slide and view-based navigation.
Latest version: 1.0.2

# @rendr-view/use-scrollsnap-controls

A specialized React hook for controlling native CSS `scroll-snap` carousels with precise slide and view-based navigation.

## 1. Metadata

- **Package Name:** `@rendr-view/use-scrollsnap-controls`
- **Description:** A hook for programmatic control of scroll-snap containers.
- **Category:** Hook

## 2. API Design

### Exports

- `useScrollSnapControls`: The primary hook.

### Hook API

```ts
const controls = useScrollSnapControls(ref, options);
```

#### Controls Object
- `slides`: `{ visible, whollyVisible, count, next(), prev(), goTo(i) }`
- `views`: `{ visible, whollyVisible, count, next(), prev(), goTo(i) }`

## 3. Implementation Details

- **Dependencies:** `lodash.debounce`, `react`
- **Features:** Supports both slide-based (individual items) and view-based (paginated groups of items) navigation.

## 4. Usage Example

```tsx
import { useScrollSnapControls } from "@rendr-view/use-scrollsnap-controls";
import { useRef } from "react";

function Carousel() {
  const scrollRef = useRef(null);
  const { slides } = useScrollSnapControls(scrollRef, { slideSelector: ".item" });

  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={slides.prev} disabled={slides.visible.includes(0)}>Prev</button>
        <button onClick={slides.next} disabled={slides.visible.includes(slides.count - 1)}>Next</button>
      </div>

      <div 
        ref={scrollRef} 
        className="flex overflow-x-auto snap-x snap-mandatory"
      >
        {[1, 2, 3, 4, 5].map(i => (
          <div key={i} className="item flex-shrink-0 w-full snap-start">
            Slide {i}
          </div>
        ))}
      </div>
    </div>
  );
}
```
npm package: @rendr-view/with-clxn
Description: A React higher-order-component (HOC) that manages mapping and merging an object of utility classes (clxn) to child elements, specifically designed for Tailwind CSS workflows.
Latest version: 1.0.2

# @rendr-view/with-clxn

A React higher-order-component (HOC) that manages mapping and merging an object of utility classes (clxn) to child elements, specifically designed for Tailwind CSS workflows.

## 1. Metadata

- **Package Name:** `@rendr-view/with-clxn`
- **Description:** A utility for managing multi-element class objects in React components.
- **Category:** Logic / HOC

## 2. API Design

### Exports

- `withClxn` (Default): The Higher-Order Component.
- `clxn`: The underlying utility for merging class objects.

### HOC API

```ts
const EnhancedComponent = withClxn(BaseComponent, defaultClasses);
```

The enhanced component receives a `clx` prop which can be a static object or a function returning an object.

## 3. Implementation Details

- **Dependencies:** `react`
- **Flexibility:** Supports conditional class merging and overrides at the instance level.

## 4. Usage Example

```tsx
import withClxn from "@rendr-view/with-clxn";

const BaseBox = ({ clx }) => (
  <div className={clx.container}>
    <h1 className={clx.title}>Hello</h1>
  </div>
);

const Box = withClxn(BaseBox, {
  container: "p-4 bg-gray-100",
  title: "text-xl font-bold"
});

// Override classes for specific instances:
<Box clx={{ container: "bg-blue-100" }} />
```
npm package: @rendr-view/with-preset
Description: A React higher-order-component (HOC) that allows applying pre-defined prop configurations ("presets") to a component via a single string prop.
Latest version: 1.0.2

# @rendr-view/with-preset

A React higher-order-component (HOC) that allows applying pre-defined prop configurations ("presets") to a component via a single string prop.

## 1. Metadata

- **Package Name:** `@rendr-view/with-preset`
- **Description:** A HOC for managing component variants via mnemonic string presets.
- **Category:** Logic / HOC

## 2. API Design

### Exports

- `withPreset` (Default): The Higher-Order Component.

### HOC API

```ts
const EnhancedComponent = withPreset(BaseComponent, presetLoader, options?);
```

#### presetLoader
A function `(preset: string, props: object) => object` that returns modified props based on the active preset.

## 3. Implementation Details

- **Dependencies:** `react`
- **Mult-preset Support:** Supports multiple space-separated presets (e.g., `preset="minimal bold border"`).

## 4. Usage Example

```tsx
import withPreset from "@rendr-view/with-preset";

const cardLoader = (preset, props) => {
  if (preset === "red") return { ...props, className: "text-red-500" };
  return props;
};

const PresetCard = withPreset(Card, cardLoader);

return <PresetCard preset="red" title="Hello" />;
```