### Input Component Example

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/examples/index.mdx

Renders the Input component. This is a basic usage example.

```astro
<Input rootClassName="!mt-0" />
```

--------------------------------

### Start Nuxt Development Server

Source: https://github.com/barvian/number-flow/blob/main/packages/vue/test/apps/nuxt3/README.md

Use these commands to start the development server locally on http://localhost:3000.

```bash
# npm
npm run dev
```

```bash
# pnpm
pnpm dev
```

```bash
# yarn
yarn dev
```

```bash
# bun
bun run dev
```

--------------------------------

### Astro Project Commands

Source: https://github.com/barvian/number-flow/blob/main/packages/number-flow/test/apps/astro/README.md

Common commands for managing an Astro project. These include installing dependencies, starting the development server, building for production, and previewing the build.

```sh
pnpm install
```

```sh
pnpm dev
```

```sh
pnpm build
```

```sh
pnpm preview
```

```sh
pnpm astro ...
```

```sh
pnpm astro -- --help
```

--------------------------------

### Activity Component Example

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/examples/index.mdx

Renders the Activity component. This is a basic usage example.

```astro
<Activity />
```

--------------------------------

### Countdown Component Example

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/examples/index.mdx

Renders the Countdown component. This is a basic usage example.

```astro
<Countdown />
```

--------------------------------

### Install Dependencies with npm, pnpm, yarn, or bun

Source: https://github.com/barvian/number-flow/blob/main/packages/vue/test/apps/nuxt3/README.md

Run these commands to install project dependencies using your preferred package manager.

```bash
# npm
npm install
```

```bash
# pnpm
pnpm install
```

```bash
# yarn
yarn install
```

```bash
# bun
bun install
```

--------------------------------

### Create Astro Project with Basics Template

Source: https://github.com/barvian/number-flow/blob/main/packages/number-flow/test/apps/astro/README.md

Use this command to initialize a new Astro project using the 'basics' template. Ensure you have pnpm installed.

```sh
pnpm create astro@latest -- --template basics
```

--------------------------------

### Slider Component Example

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/examples/index.mdx

Renders the Slider component. This is a basic usage example.

```astro
<Slider />
```

--------------------------------

### Basic NumberFlow Usage in Svelte

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Illustrates the basic implementation of the NumberFlow component in a Svelte application. The '@number-flow/svelte' package must be installed.

```svelte
<!-- Basic usage -->
<script>
import NumberFlow from '@number-flow/svelte'
</script>

<NumberFlow value={123} />
```

--------------------------------

### Basic NumberFlow Usage in React

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Demonstrates the fundamental integration of the NumberFlow component in a React application. Ensure the '@number-flow/react' package is installed.

```jsx
// Basic usage
import NumberFlow from '@number-flow/react'

<NumberFlow value={123} />
```

--------------------------------

### SSR: renderInnerHTML Utility (Vanilla JS)

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Renders the inner HTML of a component for Server-Side Rendering (SSR). Includes a usage example with Astro.

```APIDOC
## SSR: renderInnerHTML Utility (Vanilla JS)

### Description
Renders the inner HTML of a component for SSR (server-side rendering). Here's a usage example with [Astro](https://astro.build):

### Method
Utility Function

### Endpoint
N/A

### Parameters
- **value** (any) - The value to render.
- **opts** (object) - Optional. Configuration options.
  - **locales** (string) - The locale to use for formatting.
  - **format** (object) - Formatting options.
  - **nonce** (string) - A nonce for security.
  - **numberPrefix** (string) - Prefix for the number.
  - **numberSuffix** (string) - Suffix for the number.

### Request Example
```astro
---
import { renderInnerHTML } from 'number-flow'
---
<number-flow
	nonce="..."
	set:html={renderInnerHTML(123, {
		// Make sure to pass in the `locales`, `format`,
		// `numberPrefix`, and `numberSuffix`
		// properties you're using:
		locales: 'en-US',
		format: { notation: 'compact' },
		nonce: '...'
	})}
/>

<script>
	import 'number-flow'

	const flow = document.querySelector('number-flow')
	flow.locales = 'en-US'
	flow.format = { notation: 'compact' }
	
	// The first .update() call hydrates the component.
	// Make sure to pass the same value as you did in `renderInnerHTML()`:
	flow.update(123)
</script>
```

If you use `number-flow/lite`, `renderInnerHTML` also supports `renderInnerHTML(data, { nonce })`.

### Response
- **string** - The rendered HTML string.
```

--------------------------------

### Preview Nuxt Production Build Locally

Source: https://github.com/barvian/number-flow/blob/main/packages/vue/test/apps/nuxt3/README.md

Run these commands to locally preview the production build of your Nuxt application.

```bash
# npm
npm run preview
```

```bash
# pnpm
pnpm preview
```

```bash
# yarn
yarn preview
```

```bash
# bun
bun run preview
```

--------------------------------

### Build Nuxt Application for Production

Source: https://github.com/barvian/number-flow/blob/main/packages/vue/test/apps/nuxt3/README.md

Execute these commands to build your Nuxt application for production deployment.

```bash
# npm
npm run build
```

```bash
# pnpm
pnpm build
```

```bash
# yarn
yarn build
```

```bash
# bun
bun run build
```

--------------------------------

### Using NumberFlow Component in Astro

Source: https://github.com/barvian/number-flow/blob/main/site/src/components/Comp.mdx

Demonstrates how to import and use the NumberFlow component within an Astro file. Ensure the Match component is correctly set up to render the NumberFlow.

```astro
import Match from './Match.astro'

<Match><Fragment slot="vanilla">`<number-flow>`</Fragment>`<NumberFlow>`</Match>
```

--------------------------------

### Import and Render NumberFlowGroup in Astro

Source: https://github.com/barvian/number-flow/blob/main/site/src/components/GroupComp.mdx

Demonstrates how to import the Match component and render the NumberFlowGroup component with a slot. Ensure the Match component is correctly imported from its relative path.

```astro
import Match from './Match.astro'

<Match><Fragment slot="vanilla">`<number-flow-group>`</Fragment>`</Match>
```

--------------------------------

### NumberFlow Formatting with Compact Notation in Svelte

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Sets up compact notation for numbers in Svelte. Pass formatting options directly to the 'format' prop.

```svelte
<NumberFlow format={{ notation: 'compact' }} {value} />
```

--------------------------------

### Basic NumberFlow Usage in Vanilla JavaScript

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Provides instructions for using NumberFlow directly in HTML and vanilla JavaScript. This involves importing the 'number-flow' package and interacting with the custom element.

```html
<!-- Basic usage -->
<number-flow></number-flow>

<script type="module">
	import 'number-flow'
	// or, if not using a bundler:
	// import 'https://esm.sh/number-flow'

	const flow = document.querySelector('number-flow')
	// Sets the initial value:
	flow.update(123)
</script>
```

--------------------------------

### Astro Project Structure Overview

Source: https://github.com/barvian/number-flow/blob/main/packages/number-flow/test/apps/astro/README.md

This outlines the typical directory structure of an Astro project. Key directories include 'public' for static assets and 'src' for source code like layouts and pages.

```text
/
├── public/
│   └── favicon.svg
├── src/
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json
```

--------------------------------

### Basic NumberFlow Usage in Vue

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Shows how to use the NumberFlow component within a Vue.js project. The '@number-flow/vue' package is required. Use 'v-bind' or the shorthand ':' for dynamic props.

```vue
<!-- Basic usage -->
<script setup>
import NumberFlow from '@number-flow/vue'
</script>
<template>
	<NumberFlow :value="123" />
</template>
```

--------------------------------

### Animation Preference Hooks/Composables/Stores/Utilities

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Provides utilities to check if animations are supported and if the user prefers reduced motion, tailored for different frameworks.

```APIDOC
## Animation Preference Hooks/Composables/Stores/Utilities

### Description
These utilities determine if NumberFlow can animate based on browser support and user preferences for reduced motion.

### Method
Framework-specific utilities

### Endpoint
N/A

### Parameters
- **opts** (object) - Optional. Configuration options.
  - **respectMotionPreference** (boolean) - Whether to respect the user's motion preference.

### Request Example
N/A

### Response
- **boolean** (React) / **ComputedRef<boolean>** (Vue) / **Readable<boolean>** (Svelte) / **boolean** (Vanilla JS) - Indicates if animation is possible.

### Vanilla JS Specifics
#### `canAnimate`
`true` if NumberFlow can animate, i.e. the browser supports the required features.
```js
import { canAnimate } from 'number-flow'
```

#### `prefersReducedMotion`
Whether the user prefers reduced motion.
```js
import { prefersReducedMotion } from 'number-flow'

if (prefersReducedMotion.matches) {
	// User prefers reduced motion
}
```
```

--------------------------------

### Generate Content Security Policy Headers

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/_csp.txt

Generates CSP headers by hashing styles using SHA256. Requires 'node:crypto' and '[pkg]' styles.

```javascript
import { styles } from '[pkg]'
import { createHash } from 'node:crypto'

const headers = {
	'Content-Security-Policy': `style-src ${styles.map((style) => `'sha256-${createHash('sha256').update(style).digest('base64')}'`).join(' ')}`
}
```

--------------------------------

### NumberFlow Formatting with Currency and Suffix in Vue

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Applies currency formatting and a custom suffix in Vue. Ensure correct binding for props like 'format' and 'suffix'.

```vue
<NumberFlow
	:value
	:format="{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }"
	suffix="/mo"
/>
```

--------------------------------

### NumberFlow Formatting with Compact Notation in React

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Applies compact notation for number formatting in React. This requires passing an options object to the 'format' prop.

```jsx
<NumberFlow format={{ notation: 'compact' }} value={value} />
```

--------------------------------

### NumberFlow Formatting with Currency and Suffix in Vanilla JavaScript

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Sets currency formatting options and a custom suffix for the NumberFlow element in vanilla JavaScript. Access and modify properties directly on the element.

```js
flow.format = { style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }
flow.numberSuffix = "/mo"
```

--------------------------------

### Check for reduced motion preference

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Import and use the prefersReducedMotion MediaQueryList to check if the user has indicated a preference for reduced motion.

```javascript
import { prefersReducedMotion } from 'number-flow'

if (prefersReducedMotion.matches) {
	// User prefers reduced motion
}
```

--------------------------------

### NumberFlow Formatting with Currency and Suffix in React

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Demonstrates advanced formatting for currency and adds a custom suffix in React. The 'format' prop uses Intl.NumberFormat options, and 'suffix' adds a string.

```jsx
<NumberFlow
	value={value}
	format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
	suffix="/mo"
/>
```

--------------------------------

### Motion Integration for React

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/examples/index.mdx

Demonstrates integrating NumberFlow with Motion's layout animations in React. Use a spring transition to match NumberFlow's default transform timing. Ensure NumberFlow is within a `motion` component with `layout layoutRoot` props.

```javascript
{
  type: 'spring',
  duration: 0.9,
  bounce: 0
}
```

```astro
<Motion />
```

--------------------------------

### NumberFlow Formatting with Currency and Suffix in Svelte

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Configures currency formatting and appends a suffix in Svelte. The 'format' prop takes Intl.NumberFormat options, and 'suffix' is a string prop.

```svelte
<NumberFlow
	{value}
	format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
	suffix="/mo"
/>
```

--------------------------------

### Customize NumberFlow Animation Timings

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Customize animation timings for layout transforms, digit spins, and fading using EffectTiming objects. Spin timing falls back to transform timing if not specified.

```jsx
<NumberFlow
	// Used for layout-related transforms:
	transformTiming={{ duration: 750, easing: 'linear(...)' }}
	// Used for the digit spin animations.
	// Will fall back to `transformTiming` if unset:
	spinTiming={{ duration: 750, easing: 'linear(...)' }}
	// Used for fading in/out characters:
	opacityTiming={{ duration: 350, easing: 'ease-out' }}
/>
```

```vue
<NumberFlow
	:transformTiming="{
		// Used for layout-related transforms:
		duration: 750, easing: 'linear(...)'
	}"
	:spinTiming="{
		// Used for the digit spin animations.
		// Will fall back to `transformTiming` if unset:
		duration: 750, easing: 'linear(...)'
	}"
	:opacityTiming="{
		// Used for fading in/out characters:
		duration: 350, easing: 'ease-out'
	}"
/>
```

```svelte
<NumberFlow
	transformTiming={{
		// Used for layout-related transforms:
		duration: 750, easing: 'linear(...)'
	}}
	spinTiming={{
		// Used for the digit spin animations.
		// Will fall back to `transformTiming` if unset:
		duration: 750, easing: 'linear(...)'
	}}
	opacityTiming={{
		// Used for fading in/out characters:
		duration: 350, easing: 'ease-out'
	}}
/>
```

```js
// Used for layout-related transforms:
flow.transformTiming = {
	duration: 700, easing: 'linear(...)'
}
// Used for the digit spin animations.
// Will fall back to `transformTiming` if unset:
flow.spinTiming = {
	duration: 700, easing: 'linear(...)'
}
// Used for fading in/out characters:
flow.opacityTiming = {
	duration: 350, easing: 'ease-out'
}
```

--------------------------------

### NumberFlow Formatting with Compact Notation in Vue

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Configures compact notation for number display in Vue. The 'format' prop accepts an object with Intl.NumberFormat options.

```vue
<NumberFlow :format="{ notation: 'compact' }" :value />
```

--------------------------------

### Grouping Components with GroupComp

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

If a component affects another component's position, wrap them in GroupComp to properly sync their transitions.

```APIDOC
## Grouping Components with GroupComp

### Description
If a component affects another component's position, you can wrap them in a `<GroupComp/>` to properly sync their transitions. Make sure to `import 'number-flow/group'`.

### Method
Component Wrapper

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Apply Continuous Plugin to NumberFlow

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Use the 'continuous' plugin to make number transitions appear to pass through intermediate values. This plugin has no effect if 'trend' is set to 0.

```jsx
import NumberFlow, { continuous } from '@number-flow/react'

<NumberFlow
	plugins={[continuous]}
	value={value}
/>
```

```vue
<script setup>
import NumberFlow, { continuous } from '@number-flow/vue'
</script>
<template>
	<NumberFlow
		:plugins="[continuous]"
		:value="123"
	/>
</template>
```

```svelte
<script>
import NumberFlow, { continuous } from '@number-flow/svelte'
</script>

<NumberFlow
	plugins={[continuous]}
	value={123}
/>
```

```js
import { continuous } from 'number-flow'

flow.plugins = [continuous]
```

--------------------------------

### Check if animation is supported

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Import and use the canAnimate utility to determine if NumberFlow can animate. This checks for browser support and optionally respects user motion preferences.

```javascript
import { canAnimate } from 'number-flow'
```

--------------------------------

### Render HTML for SSR with Astro

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Use renderInnerHTML for server-side rendering of NumberFlow components in Astro. Ensure you pass the same locale, format, and nonce properties used in the client-side script.

```astro
--- 
import { renderInnerHTML } from 'number-flow'
---
<number-flow
	nonce="..."
	set:html={renderInnerHTML(123, {
		// Make sure to pass in the `locales`,
		// `format`,
		// `numberPrefix`,
		// and `numberSuffix`
		// properties you're using:
		locales: 'en-US',
		format: { notation: 'compact' },
		nonce: '...'
	})}
/>

<script>
	import 'number-flow'

	const flow = document.querySelector('number-flow')
	flow.locales = 'en-US'
	flow.format = { notation: 'compact' }
	
	// The first .update() call hydrates the component.
	// Make sure to pass the same value as you did in `renderInnerHTML()`:
	flow.update(123)
</script>
```

--------------------------------

### Style NumberFlow Suffix using CSS Parts

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Style specific parts of the NumberFlow component, such as the suffix, using CSS ::part pseudo-element. This allows for granular control over the component's appearance.

```css
number-flow-react::part(suffix) {
	margin-left: .0625em;
	font-weight: normal;
	font-size: 0.75em;
	color: var(--muted);
}
```

```css
number-flow-vue::part(suffix) {
	margin-left: .0625em;
	font-weight: normal;
	font-size: 0.75em;
	color: var(--muted);
}
```

```css
number-flow-svelte::part(suffix) {
	margin-left: .0625em;
	font-weight: normal;
	font-size: 0.75em;
	color: var(--muted);
}
```

```css
number-flow::part(suffix) {
	margin-left: .0625em;
	font-weight: normal;
	font-size: 0.75em;
	color: var(--muted);
}
```

--------------------------------

### NumberFlow Limitations

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Details the current limitations of the NumberFlow library, including unsupported notations, digit types, and styling behaviors.

```APIDOC
## NumberFlow Limitations

### Description
This section outlines the current limitations of the NumberFlow library.

### Limitations
* Scientific and engineering notations aren't supported.
* Non-Latin digits and RTL locales aren't currently supported.
* Backgrounds and borders on components won't scale smoothly during transitions.

For limitations related to styling and transitions, consider using [Motion for React](https://motion.dev/docs/react-quick-start) for more composable solutions.
```

--------------------------------

### Apply Conditional CSS Part Styles with DSD Support

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Apply CSS part styles conditionally based on browser support for Declarative Shadow DOM (DSD). This prevents a flash of unstyled content in older browsers.

```html
<script>
	if (
		HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode') ||
		HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot') // old Chrome/Edge
	)
		document.documentElement.setAttribute('data-supports-dsd', '')
</script>
```

```css
:root[data-supports-dsd] number-flow-react::part(suffix) {
	font-size: 0.75rem;
}
```

```css
:root[data-supports-dsd] number-flow-vue::part(suffix) {
	font-size: 0.75rem;
}
```

```css
:root[data-supports-dsd] number-flow-svelte::part(suffix) {
	font-size: 0.75rem;
}
```

```javascript
// tailwind.config.js
import plugin from 'tailwindcss/plugin'

export default {
	// ...
	plugins: [
		plugin(({ matchVariant }) => {
			matchVariant('part', (p) => `:root[data-supports-dsd] &::part(${p})`)
		})
	]
}
```

```tsx
<NumberFlow className="part-[suffix]:text-xs" />
```

```vue
<NumberFlow class="part-[suffix]:text-xs" />
```

--------------------------------

### Pass CSP Nonce to NumberFlow

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Provide a CSP nonce to the NumberFlow component to securely inject inline styles during SSR and hydration. This is essential for Content Security Policy compliance.

```jsx
<NumberFlow value={123} nonce={myNonce} />
```

```vue
<NumberFlow :value="123" :nonce="myNonce" />
```

```svelte
<NumberFlow value={123} nonce={myNonce} />
```

```html
<number-flow nonce="..." />
```

--------------------------------

### Enable CSS will-change Property

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Set the 'data-will-change' attribute on the number-flow element to apply 'will-change' CSS properties. This can improve performance for frequently changing numbers or prevent repositioning issues during transitions.

```html
<number-flow data-will-change></number-flow>
```

--------------------------------

### CSS font-variant-numeric: tabular-nums

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Ensures all numbers are the same width, preventing digit shifts during transitions. Refer to MDN for more details.

```APIDOC
## CSS font-variant-numeric: tabular-nums

### Description
Ensures all numbers are the same width, which can prevent digits from shifting during transitions.
See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric#numeric-spacing-values) for more information.

### Method
CSS Property

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Configure NumberFlow Digit Trend Direction

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Control the direction of digit animations. Set to +1 for always up, 0 for up/down based on value change, or -1 for always down.

```js
flow.transformTiming = {
	duration: 700, easing: 'linear(...)'
}
// Used for the digit spin animations.
// Will fall back to `transformTiming` if unset:
flow.spinTiming = {
	duration: 700, easing: 'linear(...)'
}
// Used for fading in/out characters:
flow.opacityTiming = {
	duration: 350, easing: 'ease-out'
}
```

--------------------------------

### Isolate NumberFlow Transitions

Source: https://github.com/barvian/number-flow/blob/main/site/src/pages/[...framework]/index.mdx

Set 'isolate' to true to prevent NumberFlow's transitions from interfering with other layout changes in the same update. This has no effect within a NumberFlowGroup.

```jsx
import NumberFlow, { continuous } from '@number-flow/react'

<NumberFlow
	plugins={[continuous]}
	value={value}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.