# App Studio complete documentation

Generated from the public pages. Start with https://app-studio-6167b.web.app/llms.txt for a smaller index.

Source: https://app-studio-6167b.web.app/components

[@APP-STUDIO/COMPONENTS](https://app-studio-6167b.web.app/docs/GettingStarted)

# React UI. Built to compose.

A TypeScript component library for React and React Native. Build consistent interfaces with shared themes, style props, and documented APIs.

[Start building](https://app-studio-6167b.web.app/components#get-started)[Explore components](https://app-studio-6167b.web.app/button)

 TypeScript first Source available Web + Native

 REAL COMPONENTS. GO AHEAD, TRY THEM.

COMPONENT PREVIEW

### Compose your next interface.

Controlled inputs. Typed callbacks. Shared styling.

Project name

A real TextField and Button. No mockup.

CONTROLLED COMPONENTS

### Inputs and controls.

**Stay in the loop**Only the updates that matter.

Include the good stuff

 All systems go⌘ KNew release

One component. Your style.

Preview

Code

Not a screenshot. Your future building blocks.[Explore Button](https://app-studio-6167b.web.app/button)

FAMILIAR TOOLS. A FRESH START. React React Native TypeScript[a. Powered by App Studio](https://app-studio-6167b.web.app/)

THE REPETITIVE PART? ALREADY DONE.

## Your ideas deserve more of your time.

Spend less time rebuilding the same controls. Start with a consistent foundation, then bring your own point of view.

### Compose. Don’t compromise.

From buttons and inputs to dialogs and navigation. Start small, combine freely, and keep control of the result.

[Meet the components](https://app-studio-6167b.web.app/docs/Button)

### Your brand belongs here.

Theme tokens, variants, and internal view overrides make a shared foundation feel like your own product.

[Explore the design system](https://app-studio-6167b.web.app/design-system)

### Details that make a difference.

Controls with labels, focus states, and keyboard interactions. Check each component’s examples for its supported behavior.

[Try an interactive control](https://app-studio-6167b.web.app/docs/Checkbox)

DIFFERENT SCREENS. SHARED FOUNDATIONS.

## One familiar API. More places to go.

Use the same imports and component patterns on web and React Native. Each platform gets a dedicated implementation.

- Shared theme tokens and styling conventions
- Platform-aware package exports
- Native compatibility documented per component

[Read the native compatibility guide](https://github.com/rize-network/app-studio-components/blob/main/docs/getting-started/react-native.md)

Some components are web-only. Native animations, icons, and gradients can require additional peers.

******your-next-app.dev

a.

A SHARED FOUNDATION

### Good morning, possibility.

Ready to build**Something great ↗**

**************

 REACT DOM

a.YOUR NEXT APP

### Same idea. New screen.

Made for here.

 REACT NATIVE

ILLUSTRATIVE LAYOUT · PLATFORM-SPECIFIC RENDERING

FIND YOUR BUILDING BLOCKS

## Small pieces. Whole experiences.

A library that grows with your interface, from the first input to the finishing touch.

[01 ### Actions & inputs Button, TextField, Checkbox, Switch](https://app-studio-6167b.web.app/button)[02 ### Structure & navigation Tabs, Sidebar, Accordion, NavigationMenu](https://app-studio-6167b.web.app/tabs)[03 ### Feedback & overlays Alert, Modal, Toast, Tooltip](https://app-studio-6167b.web.app/modal)[04 ### Content & data Card, Avatar, Badge, Table](https://app-studio-6167b.web.app/card)

FROM IDEA TO FIRST RENDER

## Install. Configure. Build.

Start with your existing React project. Add the package, wrap your app, and make it yours.

1. 01

  ### Install your foundation

  The component library uses App Studio for styling.

  `npm install @app-studio/components app-studio`

  [Check platform requirements and peer dependencies](https://app-studio-6167b.web.app/docs/installation)
2. 02

  ### Set up your providers

  ThemeProvider resolves your color tokens. ResponsiveProvider enables device-aware layouts.
3. 03

  ### Build something that feels like you

  Use typed props and your own theme. Keep your existing React tools.

```tsx
import { ThemeProvider, ResponsiveProvider,
  Vertical } from 'app-studio';
import { Button, Text } from '@app-studio/components';

export default function App() {
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical gap={16} padding={24}>
          <Text fontSize={24}>Hello, possibility.</Text>
          <Button onClick={() => console.log('Let’s go')}>
            Start something good
          </Button>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

 Ready for your React project[Full setup guide](https://app-studio-6167b.web.app/docs/installation)

A LITTLE GUIDANCE GOES A LONG WAY

## Built for the way developers learn.

Start with a working example. Understand the decisions. Go deeper when you need to.

[01 / GUIDE ### Your first component Installation, providers, peer dependencies, and a working example. Open the guide](https://app-studio-6167b.web.app/docs/installation)[02 / GUIDE ### Explore the components Props, variants, and interactive examples. Find your next building block. Open the guide](https://app-studio-6167b.web.app/docs/Button)[03 / GUIDE ### Understand the engine See how App Studio handles styling, themes, and responsive layouts. Open the guide](https://app-studio-6167b.web.app/)

GOOD QUESTIONS

## A few things to know.

Which package should I start with?

Choose @app-studio/components for ready-made UI and install app-studio alongside it. Choose app-studio alone when you want to build your own components from layout and styling primitives.

Can I make the components match my brand?

Yes. Use ThemeProvider for shared color tokens, component props for variants and sizes, and the views prop to style internal parts. Start with one component before creating a shared design system.

What does React Native support include?

The library ships dedicated native implementations with a shared public API. Availability and behavior depend on the component; some controls are web-only and some native features need optional peers. The setup guide links to the compatibility matrix.

Where can I check the source and license?

Both repositories are public on GitHub. Review the LICENSE file included with the version you adopt. The component repository currently has conflicting license information between its README and LICENSE; confirm the terms before commercial use.

 YOUR NEXT PROJECT STARTS HERE

## Make your next interface a great one.

[Start building](https://app-studio-6167b.web.app/components#get-started)[Read the documentation](https://app-studio-6167b.web.app/docs/installation)

---

Source: https://app-studio-6167b.web.app/

[APP-STUDIO / STYLING FRAMEWORK](https://app-studio-6167b.web.app/docs/AppStudio)

# Your styles. Your components. One API.

Style React with the props you already understand. Layout, themes, responsive design, and motion — together in your component.

[Get started](https://app-studio-6167b.web.app/#get-started)[Read the docs](https://app-studio-6167b.web.app/docs/AppStudio)

 Typed style props Web + Native MIT licensed

```tsx
<Vertical
  padding={24} gap={12}
  borderRadius={16}
  backgroundColor="color-white"
  animate={Animation.fadeIn()}
>
  <Text color="color-blue-900">Make it yours.</Text>
</Vertical>
```

 LIVE PREVIEW

### Make it yours.

Typed styles, rendered live.

YOUR PALETTE

PROPS → PIXELS

ONE CONNECTED STYLING SYSTEM Style props Theme tokens Responsive Animation

CLOSE TO YOUR COMPONENT. OUT OF YOUR WAY.

## Less context switching. More clarity.

Read the structure and the styling in the same place. A View for your layout. Tokens for your colors. Props for the details.

### CSS you already know.

Use padding, gap, borderRadius, and other typed style props directly. Compose layouts with View, Horizontal, and Vertical.

[See it in the guide](https://app-studio-6167b.web.app/docs/AppStudio)

### Tokens that connect the dots.

Define your theme once. Use theme-primary and color tokens throughout your interface, with light and dark palettes.

[See it in the guide](https://app-studio-6167b.web.app/docs/AppStudio)

### Made to respond and move.

Adapt layouts with the media prop. Add Animation presets on web, and use Reanimated for supported native motion.

[See it in the guide](https://app-studio-6167b.web.app/docs/AppStudio)

TWO PACKAGES. CLEAR ROLES.

## Start at the layer that works for you.

App Studio gives you the primitives. The component library builds on them. Use either starting point without learning a second styling language.

[Discover the component library](https://app-studio-6167b.web.app/components)

[02 / THE BUILDING BLOCKS ### @app-studio/components Buttons, inputs, dialogs, navigation, and more.](https://app-studio-6167b.web.app/components)[01 / THE FOUNDATION ### app-studio Layout primitives · style props · tokens · motion](https://app-studio-6167b.web.app/docs/AppStudio)

 React DOM React Native

FROM IDEA TO FIRST RENDER

## Install. Configure. Build.

Start with your existing React project. Add the package, wrap your app, and make it yours.

1. 01

  ### Install your foundation

  The styling engine works on its own.

  `npm install app-studio`

  [Check platform requirements and peer dependencies](https://app-studio-6167b.web.app/docs/core)
2. 02

  ### Set up your providers

  ThemeProvider resolves your color tokens. ResponsiveProvider enables device-aware layouts.
3. 03

  ### Build something that feels like you

  Use typed props and your own theme. Keep your existing React tools.

```tsx
import { ThemeProvider, ResponsiveProvider,
  Vertical, Text, Animation } from 'app-studio';

export default function App() {
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical
          gap={16}
          padding={32}
          media={{ mobile: { padding: 16 } }}
          animate={Animation.fadeIn()}
        >
          <Text color="theme-primary" fontSize={28}>
            Make room for your ideas.
          </Text>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

 Ready for your React project[Full setup guide](https://app-studio-6167b.web.app/docs/core)

A LITTLE GUIDANCE GOES A LONG WAY

## Built for the way developers learn.

Start with a working example. Understand the decisions. Go deeper when you need to.

[01 / GUIDE ### Understand the foundations Style props, theme tokens, responsive layouts, and your first component. Open the guide](https://app-studio-6167b.web.app/docs/core)[02 / GUIDE ### Go deeper into the API Styling states, animations, hooks, providers, and composition. Open the guide](https://github.com/rize-network/app-studio/blob/main/docs/README.md)[03 / GUIDE ### Take it to native Native mappings, optional peers, and the web APIs that differ. Open the guide](https://github.com/rize-network/app-studio/blob/main/docs/Native.md)

GOOD QUESTIONS

## A few things to know.

How is App Studio different from the component library?

App Studio is the foundation: layout primitives, style props, tokens, hooks, and animations. @app-studio/components adds ready-made controls such as buttons, dialogs, and forms. Use the engine alone or use both together.

Do I have to replace my existing styling?

No. Start with a View or a layout in one part of your React app. App Studio can sit alongside your existing components and styles. Theme tokens need ThemeProvider; responsive device names need ResponsiveProvider.

Does exactly the same code work on web and native?

The package selects a dedicated build for each platform and shares its styling API. Native uses a supported subset: browser selectors and CSS Grid do not map one-to-one. Check the native guide before sharing a screen.

Can I use it in a commercial project?

Yes. App Studio is open source under the MIT license. You can inspect the implementation, adapt it, and use it in commercial applications.

 YOUR NEXT PROJECT STARTS HERE

## Your ideas. A better foundation.

[Start building](https://app-studio-6167b.web.app/#get-started)[Read the documentation](https://app-studio-6167b.web.app/docs/core)

---

Source: https://app-studio-6167b.web.app/docs

# Build with App Studio

A shared foundation for React and React Native. Start with ready-made UI, or build your own components with the styling framework underneath it.

[START HERE**Install the packages**Requirements, peer dependencies, and provider setup.](https://app-studio-6167b.web.app/docs/installation)[EXPLORE THE LIBRARY**Find a component**Browse categories, try controls, and open working examples.](https://app-studio-6167b.web.app/docs/components)

## Two packages, one foundation

**`app-studio`** is the framework: layout primitives such as `View`, `Horizontal`, and `Vertical`, typed style props, theme tokens, responsive rules, hooks, and animation presets.

**`@app-studio/components`** is the component library built on that framework: buttons, inputs, navigation, feedback, overlays, and other interface controls.

Use the framework on its own when you want to create your own controls. Install both packages when you want ready-made components. You do not need to replace your existing React state management or application architecture.

## Your path to a first interface

1. **Install:** choose your platform and add compatible dependencies in [Installation](https://app-studio-6167b.web.app/docs/installation).
2. **Configure:** wrap the app in `ThemeProvider` and `ResponsiveProvider`.
3. **Build:** follow the [Quick start](https://app-studio-6167b.web.app/docs/quick-start) to connect real state to your first controls.
4. **Customize:** learn [styling](https://app-studio-6167b.web.app/docs/styling), [themes](https://app-studio-6167b.web.app/docs/theming), and [responsive layouts](https://app-studio-6167b.web.app/docs/responsive).
5. **Explore:** use the [component browser](https://app-studio-6167b.web.app/docs/components) to find reference material and existing examples.

## Conventions to know

- Import layout primitives and providers from `app-studio`.
- Import ready-made controls from `@app-studio/components`.
- Pass familiar styling properties directly as props.
- Resolve `theme-*` and `color-*` tokens through `ThemeProvider`.
- Input callbacks use values: `TextField` returns a string; `Checkbox` and `Switch` return booleans.
- Platform support depends on the component. Read [React Native](https://app-studio-6167b.web.app/docs/react-native) before sharing a screen.

## How to use this documentation

**Getting started** takes you from installation to your first working interface. **Foundations** explains the styling model. **Guides** covers common implementation decisions.

The **component library** is grouped by category. A component's **Reference** page contains its existing documentation, while **Examples** opens its interactive demonstration page. The component browser exposes both, so you can inspect behavior before using it.

Component references include import instructions, interactive examples with copyable source, and searchable props tables. Required props, literal implementation defaults, and compound parts are listed together. Shared styling props link back to the foundations guides.

## Build in the open

Explore [the component source](https://github.com/rize-network/app-studio-components) and [the framework source](https://github.com/rize-network/app-studio). Refer to each package's included `LICENSE` for its terms of use.

---

Source: https://app-studio-6167b.web.app/docs/installation

# Installation

Start with an existing React project. Choose the component library for ready-made controls, or the framework alone for your own component system.

## Requirements

- React 18 or newer. Keep `react` and `react-dom` on matching versions in a web app.
- A React build setup that resolves package exports, such as Vite or your existing framework.
- TypeScript is supported; JavaScript projects can use the same components.
- For React Native, follow [native setup](https://app-studio-6167b.web.app/docs/react-native). The core package declares React Native 0.79 or newer.

## Install the component library

The library depends on App Studio for styling. Install both:

```bash
npm install @app-studio/components app-studio
```

Install the web peer dependencies you do not already have:

```bash
npm install react react-dom react-router-dom formik zustand lucide-react
```

Keep existing compatible versions. React Router supports router-dependent components, Formik powers its form wrappers, and Zustand and the icon package support components that use them. Do not use `--force` to hide incompatible peer versions in a consuming application.

With another package manager, use the same package names with `pnpm add` or `yarn add`.

## Use the framework on its own

If you only need layout primitives, style props, tokens, and motion:

```bash
npm install app-studio
```

You do not need the component library or its Formik, Zustand, and icon peers for this starting point. A web app still needs React and React DOM.

## Configure the providers

`ThemeProvider` defines the color variables behind `theme-*` and `color-*` tokens. `ResponsiveProvider` supplies the device and breakpoint configuration used by `media` and responsive hooks.

```tsx
import React from 'react';
import { ThemeProvider, ResponsiveProvider, Vertical, Text } from 'app-studio';

export default function App() {
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical padding={24} gap={12}>
          <Text fontSize={24} color="theme-primary">
            App Studio is ready.
          </Text>
          <Text>Add your application's components here.</Text>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

Mount providers near the root. Keep your existing router, data fetching, and state providers; App Studio does not replace them.

## Add document defaults

The library styles components, not the browser document. Add these defaults to your application's stylesheet:

```css
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
```

There is no separate component stylesheet to import for these examples.

## When routing is needed

Router-dependent components need your app's React Router context. A simple `Button` with `onClick` does not need a router. Internal routing links and navigation components can require one.

## Verify your setup

Start your development server. Confirm that the example renders, `theme-primary` has a color, and changing the viewport affects a component with `media` rules.

Continue with the [Quick start](https://app-studio-6167b.web.app/docs/quick-start). If colors or imports are missing, use [Troubleshooting](https://app-studio-6167b.web.app/docs/troubleshooting).

---

Source: https://app-studio-6167b.web.app/docs/quick-start

# Quick start

Build a small interface with real React state. Complete [Installation](https://app-studio-6167b.web.app/docs/installation) first; this example needs both packages and their web peers.

## Start with a working screen

Copy this into your app's entry component. Edit the name, toggle notifications, and press the button. This example updates local state only; it does not save data to a server.

```tsx
import React from 'react';
import { ThemeProvider, ResponsiveProvider, Vertical, Text } from 'app-studio';
import { Button, TextField, Switch } from '@app-studio/components';

export default function App() {
  const [name, setName] = React.useState('My project');
  const [notifications, setNotifications] = React.useState(true);
  const [message, setMessage] = React.useState('');
  return (
    <ThemeProvider theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical
          gap={16}
          padding={32}
          maxWidth={480}
          media={{ mobile: { padding: 16 } }}
        >
          <Text as="h2" fontSize={28} fontWeight="bold">
            Your first interface
          </Text>
          <TextField label="Project name" value={name} onChange={setName} />
          <Switch
            label="Enable notifications"
            isChecked={notifications}
            onChange={setNotifications}
          />
          <Button
            isDisabled={!name.trim()}
            onClick={() =>
              setMessage(
                `${name.trim()}: notifications ${notifications ? 'on' : 'off'}.`
              )
            }
          >
            Preview settings
          </Button>
          <Text role="status">{message}</Text>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

## Understand the imports

`ThemeProvider`, `ResponsiveProvider`, `Vertical`, and `Text` come from the framework. `Button`, `TextField`, and `Switch` come from the ready-made component library.

`Vertical` stacks children. `gap` sets space between them. `padding` and the `media` override describe the layout alongside its structure.

## Connect state with values

`TextField` calls `onChange` with the new string. `Switch` and `Checkbox` call it with a boolean. Pass your setter directly, or transform the value in your callback. These callbacks do not pass a DOM change event.

The empty-name check disables the button. Your app remains responsible for validation and persistence; a styled control does not save data automatically.

## Make one change at a time

- Change `theme.primary` in [Colors & theming](https://app-studio-6167b.web.app/docs/theming).
- Choose variants or customize internal views in [Styling & composition](https://app-studio-6167b.web.app/docs/styling).
- Connect a complete form in [Forms & validation](https://app-studio-6167b.web.app/docs/forms).
- Use the [component browser](https://app-studio-6167b.web.app/docs/components) to find your next building block.

---

Source: https://app-studio-6167b.web.app/docs/react-native

# React Native

Both packages ship dedicated native builds. Sharing an API reduces repetition, but each platform still needs its own setup and verification.

## Requirements and installation

Use an existing React Native project with package exports enabled. The current core package declares React Native 0.79 or newer. Keep the React version required by your native project.

For the framework alone:

```bash
npm install app-studio
```

For the ready-made component library:

```bash
npm install app-studio @app-studio/components lucide-react-native
```

The native app provides `react` and `react-native`. Do not add React DOM or React Router just to use native primitives.

## Package resolution

Import from `app-studio` and `@app-studio/components` as usual. Metro uses the `react-native` export condition to choose native implementations. Do not import browser bundle paths into a native screen.

For a native TypeScript consumer, follow your framework's configuration and the libraries' native guide. If the wrong typings are selected, check package-export support and the `react-native` custom condition rather than suppressing errors.

## Providers

Use `ThemeProvider` for tokens and `ResponsiveProvider` for responsive rules, as on web. Put them near your native app's root. Text content should use the library's text components rather than assuming a DOM container can render text.

## Optional native features

- `react-native-reanimated` enables supported animation presets.
- `react-native-svg` is used by components that render SVG.
- `react-native-linear-gradient` supports native gradients.
- `lucide-react-native` supplies native icons where used.

Install only the peers required by the components you use. Follow their version-specific setup and run pod installation when your iOS project requires it.

## Differences to plan for

- **Availability:** some components are web-only. Check the compatibility matrix before importing a screen's controls.
- **Layout:** CSS Grid maps to supported fixed-column native layouts, not the entire CSS Grid feature set.
- **Interaction:** browser hover selectors and pseudo-elements do not apply to touch interfaces.
- **Forms:** submission, return keys, and focus need explicit native wiring.
- **Navigation:** use your native navigation setup; browser link behavior is not a native route model.
- **Accessibility:** test native labels, roles, focus, and screen-reader behavior separately.

## Compatibility reference

Use the [component compatibility matrix and setup guide](https://github.com/rize-network/app-studio-components/blob/main/docs/getting-started/react-native.md) and the [framework native mappings](https://github.com/rize-network/app-studio/blob/main/docs/Native.md). The previews on this documentation site run in a browser and do not prove native compatibility.

---

Source: https://app-studio-6167b.web.app/docs/core

# App Studio foundations

`app-studio` is the framework underneath `@app-studio/components`. It provides a common way to describe layout and styling in React and React Native.

## Layout primitives

- `View` is a general-purpose container.
- `Vertical` stacks children in a column.
- `Horizontal` places children in a row.
- `Center` centers its children.
- `Text` renders text with typography and color props.
- `Grid` uses CSS Grid on web and a fixed-column Flexbox mapping on native.

```tsx
import React from 'react';
import { Vertical, Horizontal, Text } from 'app-studio';

export function ProjectSummary() {
  return (
    <Vertical
      gap={16}
      padding={24}
      backgroundColor="color-blue-50"
      borderRadius={12}
    >
      <Text fontSize={22} fontWeight="bold">
        Project overview
      </Text>
      <Horizontal gap={12} alignItems="center">
        <Text color="theme-primary">Ready to build</Text>
        <Text color="color-gray-600">React + Native</Text>
      </Horizontal>
    </Vertical>
  );
}
```

## Style props

Pass familiar properties such as `padding`, `gap`, `borderRadius`, and `backgroundColor` directly to a primitive. Numbers represent pixels on web and native layout units on React Native.

On web, use semantic elements through `as`, for example `Text as="h2"` or `View as="section"`. Native accessibility semantics need platform-specific props and behavior; browser tags are not native accessibility roles.

## Providers and tokens

`ThemeProvider` resolves color tokens. `ResponsiveProvider` configures named devices and breakpoints. Keep them near the root so screens share the same foundation.

- `theme-primary` expresses a semantic role you configure.
- `color-blue-900` selects a palette entry.
- `media={{ mobile: { padding: 16 } }}` changes styles for a configured device.

Use [Colors & theming](https://app-studio-6167b.web.app/docs/theming) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive) for practical examples.

## Composition stays in React

Extract reusable components, pass props and children, and use hooks as you would in a React app. Routing, application state, data fetching, and validation stay with your chosen tools.

The ready-made library adds props such as `variant`, `size`, and `views`. See [Styling & composition](https://app-studio-6167b.web.app/docs/styling) before creating wrappers around every control.

## What changes between platforms

Package exports select separate web and native implementations. Many props and conventions are shared, but browser selectors, form semantics, navigation, and CSS Grid do not map one-to-one.

Read [React Native](https://app-studio-6167b.web.app/docs/react-native) before assuming a web example can be shared unchanged.

## Further reference

The framework repository has detailed references for [primitives](https://github.com/rize-network/app-studio/blob/main/docs/Components.md), [providers](https://github.com/rize-network/app-studio/blob/main/docs/Providers.md), and [hooks](https://github.com/rize-network/app-studio/blob/main/docs/Hooks.md).

---

Source: https://app-studio-6167b.web.app/docs/styling

# Styling & composition

Use the same styling foundation across your own primitives and the ready-made library. Keep layout close to the component and customize only what you need.

## Start with style props

```tsx
import React from 'react';
import { View, Text } from 'app-studio';

export function Callout() {
  return (
    <View
      padding={24}
      borderRadius={12}
      backgroundColor="color-blue-50"
      borderWidth={1}
      borderStyle="solid"
      borderColor="color-blue-200"
    >
      <Text color="color-blue-900">
        A consistent foundation, with room for your design.
      </Text>
    </View>
  );
}
```

Resolve tokens through `ThemeProvider`. Numeric spacing values represent pixels on web and native layout units on React Native.

## Choose a built-in variant

Before overriding internal styles, check the component's `variant`, `size`, and other documented props.

```tsx
import React from 'react';
import { Horizontal } from 'app-studio';
import { Button } from '@app-studio/components';

export function Actions() {
  return (
    <Horizontal gap={12} flexWrap="wrap">
      <Button variant="filled" size="sm">
        Save
      </Button>
      <Button variant="outline" size="sm">
        Cancel
      </Button>
      <Button variant="ghost" size="sm">
        More options
      </Button>
    </Horizontal>
  );
}
```

Variant names differ between components. Use each component's TypeScript props and examples rather than assuming every control accepts the same names.

## Customize internal views

`views` exposes named internal parts. Button exposes `container`, `content`, and icon and loader parts. The available names are component-specific.

```tsx
import React from 'react';
import { Button } from '@app-studio/components';

export function CustomButton() {
  return (
    <Button
      variant="outline"
      views={{
        container: { borderRadius: 12 },
        content: { letterSpacing: 0.5 },
      }}
    >
      Your brand
    </Button>
  );
}
```

Preserve labels, focus indicators, disabled behavior, and hit areas when overriding views.

## Interaction states on the web

Primitives support state styles such as `_hover`, `_active`, and `_focus`. Use a semantic interactive element and keep keyboard focus visible.

```tsx
import React from 'react';
import { View } from 'app-studio';

export function StateExample() {
  return (
    <View
      as="button"
      padding={12}
      borderRadius={8}
      backgroundColor="color-blue-900"
      color="color-white"
      _hover={{ backgroundColor: 'color-blue-800' }}
      _focus={{ outline: '3px solid #93c5fd', outlineOffset: 3 }}
    >
      Focus or hover me
    </View>
  );
}
```

Browser selectors and pseudo-elements are web-only. On native, use supported platform events and accessibility behavior. See [platform differences](https://app-studio-6167b.web.app/docs/react-native).

## Compose ordinary React components

Extract a component when layout or behavior repeats. A single visual adjustment can stay as props at the call site. Configure [theme tokens](https://app-studio-6167b.web.app/docs/theming) before copying raw colors across your app.

The [framework styling reference](https://github.com/rize-network/app-studio/blob/main/docs/Styling.md) documents more states and selectors.

---

Source: https://app-studio-6167b.web.app/docs/providers

# Providers

Providers share configuration through React context. Start with the theme and responsive providers; add optional contexts only when your app consumes them.

## The usual starting point

```tsx
import React from 'react';
import { ThemeProvider, ResponsiveProvider, Vertical, Text } from 'app-studio';

export function ProviderSetup() {
  return (
    <ThemeProvider mode="light" theme={{ primary: 'color-blue-900' }}>
      <ResponsiveProvider>
        <Vertical padding={24} gap={12}>
          <Text color="theme-primary" fontWeight="bold">
            Shared configuration
          </Text>
          <Text>Your application's screens belong inside these providers.</Text>
        </Vertical>
      </ResponsiveProvider>
    </ThemeProvider>
  );
}
```

Keep this setup near your app's root. Your router, state, and data providers remain ordinary React providers alongside it.

## ThemeProvider

`theme` maps semantic tokens such as `primary` to colors. `mode` selects `light` or `dark`. The optional `light` and `dark` props customize palette configuration.

The hook API uses different names: `useTheme()` returns `themeMode` and `setThemeMode`, as well as color resolution helpers. See [Colors & theming](https://app-studio-6167b.web.app/docs/theming) and [Hooks](https://app-studio-6167b.web.app/docs/hooks).

## ResponsiveProvider

`breakpoints` defines screen sizes and `devices` groups them into names such as `mobile`. Descendants use that configuration through `media` or `useResponsive()`.

Keep device names consistent with the rules in your components. See [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive).

## Optional providers

**`WindowSizeProvider`** supplies dimensions to `useWindowSize()`. Add it around the consumers that need window measurements. Responsive styling does not require you to add window measurements to every component.

**`AnalyticsProvider`** accepts a `trackEvent` callback. Wire it only if your application needs event tracking; it is not required for basic styling or component rendering.

## Scope configuration deliberately

React context follows the component tree. Keep shared configuration at the root and use nested providers for a deliberate local variation. Test portaled controls, such as dialogs, when a local theme differs from the surrounding app.

The native build exposes the corresponding providers with platform-specific dimension tracking. See [React Native](https://app-studio-6167b.web.app/docs/react-native).

---

Source: https://app-studio-6167b.web.app/docs/theming

# Colors & theming

Connect your interface to shared color tokens. Put `ThemeProvider` near the root so primitives and ready-made components resolve the same palette.

## Theme tokens and palette tokens

`theme-primary` is a semantic role. You decide which palette entry it points to. `color-blue-900` is a specific palette entry. Both are resolved through the provider.

```tsx
import React from 'react';
import { ThemeProvider, Vertical, Text } from 'app-studio';
import { Button } from '@app-studio/components';

export function BrandExample() {
  return (
    <ThemeProvider theme={{ primary: 'color-violet-700' }}>
      <Vertical gap={16} padding={24}>
        <Text color="theme-primary" fontWeight="bold">
          Your brand, shared.
        </Text>
        <Button>Primary action</Button>
        <Button variant="outline">Secondary action</Button>
      </Vertical>
    </ThemeProvider>
  );
}
```

Use semantic tokens for roles that should change together. Use palette tokens when a deliberate fixed color is appropriate.

## Light and dark mode

Control the provider's `mode` prop with React state. It selects the light or dark palette; it does not automatically redesign every custom color or browser document style in your application.

```tsx
import React from 'react';
import { ThemeProvider, Vertical, Text } from 'app-studio';
import { Button } from '@app-studio/components';

export function ThemeExample() {
  const [dark, setDark] = React.useState(false);
  return (
    <ThemeProvider mode={dark ? 'dark' : 'light'}>
      <Vertical
        padding={24}
        gap={16}
        backgroundColor="color-white"
        borderRadius={12}
      >
        <Text color="color-gray-900">A shared color system.</Text>
        <Button onClick={() => setDark(!dark)}>
          Switch to {dark ? 'light' : 'dark'} mode
        </Button>
      </Vertical>
    </ThemeProvider>
  );
}
```

Check text contrast, surfaces, borders, disabled states, and focus rings in each mode. Raw hex colors keep their literal value rather than following the palette.

## Per-component colors

Button supports `backgroundColor` for its surface and `textColor` for explicit content color. Other components have their own color props and internal `views` parts. Check the current TypeScript props before copying an override across components.

## Custom palettes and external tools

The provider also accepts `light` and `dark` palette configurations. `useTheme` exposes helpers such as `getColor` for CSS variables and `getColorHex` when another library needs a literal color.

See the [full theming reference](https://github.com/rize-network/app-studio/blob/main/docs/Theming.md) for palette structure and resolution rules. Start with a few semantic tokens before replacing the entire palette.

---

Source: https://app-studio-6167b.web.app/docs/responsive

# Responsive layouts

Use the `media` prop for layout and style changes. Use responsive hooks when the rendered behavior or content must change. Configure both through `ResponsiveProvider`.

## Adapt a layout with media

```tsx
import React from 'react';
import { Horizontal, Vertical, Text } from 'app-studio';
import { Button } from '@app-studio/components';

export function ResponsiveActions() {
  return (
    <Horizontal
      gap={24}
      padding={24}
      alignItems="center"
      justifyContent="space-between"
      media={{
        mobile: { flexDirection: 'column', alignItems: 'stretch', padding: 16 },
      }}
    >
      <Vertical gap={8}>
        <Text fontSize={22} fontWeight="bold">
          Ready for any screen
        </Text>
        <Text>Resize the viewport to change the layout.</Text>
      </Vertical>
      <Button>Continue</Button>
    </Horizontal>
  );
}
```

Named devices such as `mobile` depend on your provider configuration. They are not independent magic widths. On web, style overrides use media queries rather than requiring a hook-driven render.

## Configure breakpoints

The shipped defaults use `xs: 0`, `sm: 340`, `md: 560`, `lg: 1080`, and `xl: 1300`. You can supply explicit project breakpoints and device groups:

```ts
const breakpoints = { xs: 0, sm: 480, md: 768, lg: 1024, xl: 1440 };
const devices = {
  mobile: ['xs', 'sm'],
  tablet: ['md'],
  desktop: ['lg', 'xl'],
};
// Pass both objects to ResponsiveProvider near the root.
```

Keep this configuration shared across screens. Changing it changes every named-device rule beneath that provider.

## When to use a hook

`useResponsive()` exposes helpers such as `on('mobile')` for device-aware logic. Hook-driven decisions re-render when the responsive state changes. Prefer `media` for purely visual changes and avoid hiding essential content on small screens.

## Native and constrained layouts

Native responsive state follows window dimensions, including rotation and split-screen. CSS Grid does not exist on native: use a fixed integer column count for the supported mapping or explicit Flexbox layouts.

A browser-window breakpoint is not the same as the width of a narrow panel. The framework's [responsive reference](https://github.com/rize-network/app-studio/blob/main/docs/Responsive.md) also covers container-scoped responsiveness.

## Verify the result

Test a narrow phone, a tablet-sized viewport, a wide screen, and enlarged text. Check focus visibility and code overflow as well as visual alignment.

---

Source: https://app-studio-6167b.web.app/docs/animation

# Animation

Use motion to explain a change or draw attention to new content. Keep important content and controls usable without animation.

## Add an animation preset

Import `Animation` from `app-studio` and pass a preset to `animate`:

```tsx
import React from 'react';
import { View, Text, Animation } from 'app-studio';
import { Button } from '@app-studio/components';

export function MotionExample() {
  const [version, setVersion] = React.useState(0);
  return (
    <View gap={16} display="flex" flexDirection="column">
      <View
        key={version}
        className="app-motion"
        padding={24}
        borderRadius={12}
        backgroundColor="color-violet-50"
        animate={Animation.fadeIn({ duration: '0.4s' })}
      >
        <Text color="color-violet-900">New content, gently introduced.</Text>
      </View>
      <Button variant="outline" onClick={() => setVersion(version + 1)}>
        Replay
      </Button>
    </View>
  );
}
```

The React key remounts the animated content for this demonstration. Do not remount an entire form or screen merely to replay motion; that can reset user state.

## Respect reduced motion

On web, add a reduced-motion rule for the region your app animates:

```css
@media (prefers-reduced-motion: reduce) {
  .app-motion,
  .app-motion * {
    animation: none !important;
    transition: none !important;
  }
}
```

Do not make completion, navigation, or access to information depend on an animation finishing. Check your native app's reduced-motion behavior separately.

## Native setup

Web presets use CSS keyframes. Native presets use the optional `react-native-reanimated` peer. Without it, animation props are ignored. Follow the peer's platform setup, including the configuration required by your installed version.

See [native setup](https://app-studio-6167b.web.app/docs/react-native) and the [animation reference](https://github.com/rize-network/app-studio/blob/main/docs/Animation.md) for supported presets and options.

---

Source: https://app-studio-6167b.web.app/docs/hooks

# Hooks

Use framework hooks when React needs to know about the environment or an interaction. Prefer style props for visual changes that do not need application logic.

## Read the current theme

`useTheme()` exposes `themeMode`, `setThemeMode`, `theme`, and color helpers. The provider accepts `mode`; the hook's state is named `themeMode`.

```tsx
import React from 'react';
import { useTheme, Text } from 'app-studio';

export function CurrentTheme() {
  const { themeMode } = useTheme();
  return <Text color="theme-primary">Current theme: {themeMode}</Text>;
}
```

Components resolve color tokens automatically. Use `getColor` for a CSS value or `getColorHex` when an external tool requires a literal color. See [Colors & theming](https://app-studio-6167b.web.app/docs/theming).

## Respond to device state

`useResponsive()` reads the configuration from `ResponsiveProvider`. Use `on('mobile')` for device-aware logic. A hook-driven decision re-renders when its state changes; use the `media` prop for purely visual overrides.

```tsx
import React from 'react';
import { useResponsive, Text } from 'app-studio';

export function DeviceHint() {
  const { on } = useResponsive();
  return <Text>{on('mobile') ? 'Compact viewport' : 'Larger viewport'}</Text>;
}
```

Avoid removing essential content just because a viewport is smaller. See [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive).

## Track hover for a visual detail

```tsx
import React from 'react';
import { useHover, View, Text } from 'app-studio';

export function HoverDetail() {
  const [ref, hovered] = useHover<HTMLDivElement>();
  return (
    <View
      ref={ref}
      padding={24}
      borderRadius={12}
      backgroundColor={hovered ? 'color-violet-100' : 'color-blue-50'}
    >
      <Text>
        Hover changes this surface; the information is always available.
      </Text>
    </View>
  );
}
```

Hover is a browser interaction, not a native touch interaction. Keep actions and information available to keyboard, touch, and assistive-technology users.

## Read window dimensions

Wrap consumers of `useWindowSize()` in `WindowSizeProvider`:

```tsx
import React from 'react';
import { WindowSizeProvider, useWindowSize, Text } from 'app-studio';

function Dimensions() {
  const { width, height } = useWindowSize();
  return (
    <Text>
      Window: {width} × {height}
    </Text>
  );
}

export function WindowExample() {
  return (
    <WindowSizeProvider>
      <Dimensions />
    </WindowSizeProvider>
  );
}
```

Window dimensions describe the window, not necessarily a component's available width. On native, verify rotation and split-screen behavior on the target platform.

## Further hooks

The framework also exposes hooks for focus, visibility, scrolling, and element position. Consult the [hook reference](https://github.com/rize-network/app-studio/blob/main/docs/Hooks.md) and current TypeScript signatures for their options and platform differences.

---

Source: https://app-studio-6167b.web.app/docs/forms

# Forms & validation

Choose controlled inputs for a small interaction or Formik wrappers for a larger form. Your application owns validation, submission, loading, and server errors.

## Use value-first callbacks

`TextField` calls `onChange` with a string. `Checkbox` and `Switch` call it with a boolean. Their callbacks do not receive DOM change events.

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { TextField, Checkbox } from '@app-studio/components';

export function ControlledFields() {
  const [name, setName] = React.useState('');
  const [updates, setUpdates] = React.useState(false);
  return (
    <Vertical gap={16}>
      <TextField label="Project name" value={name} onChange={setName} />
      <Checkbox
        label="Receive project updates"
        isChecked={updates}
        onChange={setUpdates}
      />
    </Vertical>
  );
}
```

## Connect Formik

Formik is a web peer dependency of the component library. Its named wrappers connect field names to form state. This example validates a required value and displays a local confirmation; it does not call an API.

```tsx
import React from 'react';
import { Formik } from 'formik';
import { Vertical, Text } from 'app-studio';
import { FormikForm, FormikTextField, Button } from '@app-studio/components';

export function ProjectForm() {
  const [message, setMessage] = React.useState('');
  return (
    <Formik
      initialValues={{ name: '' }}
      validate={(values) =>
        values.name.trim() ? {} : { name: 'Enter a project name.' }
      }
      onSubmit={(values, { setSubmitting }) => {
        setMessage(`Ready: ${values.name.trim()}`);
        setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <FormikForm>
          <Vertical gap={16}>
            <FormikTextField name="name" label="Project name" />
            <Button type="submit" isLoading={isSubmitting}>
              Check project
            </Button>
            <Text role="status">{message}</Text>
          </Vertical>
        </FormikForm>
      )}
    </Formik>
  );
}
```

For a real asynchronous request, return or await the request in `onSubmit`. Keep submitted data until the save is confirmed, surface failures, and prevent duplicate submissions. Local validation does not replace server validation.

## Labels, errors, and focus

Use a visible label for every field. Keep error text close to its input and programmatically associated with it. After validation fails, help the user reach the first invalid field without losing their values.

Check keyboard submission as well as pointer interaction. Avoid using placeholder text as the only label. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).

## Native forms

Native does not have browser form semantics. Wire submission, return keys, focus, and validation explicitly. See [React Native](https://app-studio-6167b.web.app/docs/react-native) before sharing a form screen.

---

Source: https://app-studio-6167b.web.app/docs/accessibility

# Accessibility

Components are a starting point. The accessibility of your product also depends on composition, labels, content, styling overrides, and platform behavior.

## Give controls a clear name

Use visible labels for fields and meaningful text for actions. An icon-only button needs an accessible name. Avoid using a placeholder as the only field label.

```tsx
import React from 'react';
import { Vertical } from 'app-studio';
import { TextField, Button } from '@app-studio/components';

export function LabeledControls() {
  return (
    <Vertical gap={16}>
      <TextField
        label="Project name"
        placeholder="For example, Design system"
      />
      <Button ariaLabel="Create project">Create project</Button>
    </Vertical>
  );
}
```

## Preserve semantics and keyboard behavior

Use buttons for actions and links for navigation. When using primitives on web, choose the appropriate `as` element. Keep a visible focus indicator and do not recreate a button with a clickable generic container.

Check Tab order, Enter and Space activation, Escape behavior for overlays, and focus return after a dialog closes. Test each component's supported keyboard behavior before composing a new interaction.

## Communicate state and errors

Make disabled, selected, loading, success, and error states understandable without color alone. Associate error text with the corresponding field. Announce relevant asynchronous results without moving focus unnecessarily.

Do not add ARIA roles that conflict with a control's native semantics. The appropriate API differs between the web and native implementations.

## Check colors and motion

Verify contrast in light and dark mode and after applying theme or view overrides. Ensure focus indicators remain visible against the actual surface. Respect reduced motion as described in [Animation](https://app-studio-6167b.web.app/docs/animation).

## Test the composed experience

1. Complete the main task using only a keyboard.
2. Check names, roles, state, and reading order with a screen reader.
3. Enlarge text and test narrow layouts without losing content or controls.
4. Test invalid and loading states, not only the successful path.
5. Repeat platform-specific checks on a real native target when sharing a screen.

Automated checks can catch some problems. They do not establish full conformance or replace testing your product's real workflows.

---

Source: https://app-studio-6167b.web.app/docs/ai-assistants

# App Studio with AI & coding assistants

App Studio publishes the same documentation for people and coding assistants. Use the [documentation index](https://app-studio-6167b.web.app/llms.txt) to find a topic, then fetch its Markdown page for the actual API and examples. These files are regenerated with the website so the two formats stay aligned.

## Choose the right package

- **`app-studio`** is the styling framework. Import `View`, `Horizontal`, `Vertical`, `Text`, `ThemeProvider`, and `ResponsiveProvider` from this package. Install it on its own when building your own component system.
- **`@app-studio/components`** provides ready-made controls built on the framework. Install both packages when using these controls. Check the component's Import section: repository-only modules are explicitly identified.
- Web and React Native use dedicated builds. Shared imports do not guarantee identical platform support; check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) and the component reference.

## Give your assistant the documentation

Start with [llms.txt](https://app-studio-6167b.web.app/llms.txt), a compact index of the framework, setup guides, and component references. Every public page has a Markdown alternative: for example, [installation.md](https://app-studio-6167b.web.app/docs/installation.md) and [Button.md](https://app-studio-6167b.web.app/docs/Button.md). The page's HTML head also links to this alternative.

The [complete Markdown export](https://app-studio-6167b.web.app/llms-full.txt) combines the public pages in one file. It is larger; fetch individual pages when your assistant only needs one API or setup step.

Use this starting prompt with a coding assistant that can fetch URLs:

```text
Read https://app-studio-6167b.web.app/llms.txt.
Use its installation, quick-start, styling, and relevant component references.
Build a React screen with App Studio using the documented imports and callbacks.
Check required props, provider setup, peer dependencies, and platform limitations.
Link the reference pages you used and identify anything the docs do not establish.
```

If the assistant cannot fetch websites, paste the relevant Markdown page into its context. In an existing repository, include your installed package versions and target platform so the assistant can compare the documentation with your local types.

## Check generated code

1. Follow [Installation](https://app-studio-6167b.web.app/docs/installation) before adding controls. Keep existing compatible peers rather than forcing an installation.
2. Mount `ThemeProvider` when using `theme-*` and `color-*` tokens. Use `ResponsiveProvider` for named responsive rules.
3. Use the props documented for the actual component. Required flags, literal defaults, and compound parts are listed in the reference; defaults can be overridden by your design system.
4. Controlled input callbacks receive values: `TextField` returns a string, while `Checkbox` and `Switch` return booleans. Keep that value in React or form state.
5. Try the generated result in the component playground and run your application's type checks, keyboard checks, and platform tests. A code example does not establish support for every browser or native platform.

Continue with [Quick start](https://app-studio-6167b.web.app/docs/quick-start), [Styling & composition](https://app-studio-6167b.web.app/docs/styling), and [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).

## Verify source and licensing

The [framework repository](https://github.com/rize-network/app-studio) and [component repository](https://github.com/rize-network/app-studio-components) provide the implementation behind the docs. Component references link to their source declarations. Check the `LICENSE` included with the version you adopt; the two packages have separate terms.

These exports make documentation easier to retrieve. They do not guarantee that a search engine or assistant will index, recommend, or cite the project.

---

Source: https://app-studio-6167b.web.app/docs/troubleshooting

# Troubleshooting

Start with the smallest component that reproduces the issue. Check the installed package versions and your provider setup before adding overrides.

## Colors are missing

Confirm that `ThemeProvider` wraps the component and the token exists. `theme-primary` and `color-*` props resolve through the provider's variables. A raw color and a token follow different resolution paths.

Inspect the rendered element and its computed color. Check whether a local `views` override or surrounding stylesheet changes the value. See [Colors & theming](https://app-studio-6167b.web.app/docs/theming).

## Responsive props do nothing

Mount `ResponsiveProvider`. Check its breakpoint and device configuration, and confirm which viewport or container drives the rule. Do not assume a narrow panel automatically counts as the `mobile` device.

See [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive).

## Input state does not update

Use value-first handlers. `TextField` returns a string; `Checkbox` and `Switch` return booleans. Use `onChange={setValue}` for controlled state rather than reading `event.target.value` from these component callbacks.

Keep the controlled value and handler on the same component. See [Forms & validation](https://app-studio-6167b.web.app/docs/forms).

## An import or peer dependency fails

Check the package's exported entry points and the peer versions used by your app. Install compatible peers instead of forcing an incompatible dependency tree. Keep React and its renderer compatible.

If you develop these repositories locally, build the sibling `app-studio` package before consuming its generated entry points. That source-checkout step is separate from installing the published package in an application.

## A routing component throws

Check whether the component depends on React Router and whether it is inside your application's router. A component's navigation behavior is different from a simple action button with an `onClick` handler.

## Native rendering differs from the web preview

The site's previews are browser examples. Check component availability, Metro export resolution, optional native peers, and native-specific setup. Browser selectors, form semantics, and navigation do not map directly to native.

Start with [React Native](https://app-studio-6167b.web.app/docs/react-native) and the linked compatibility matrix.

## An older reference differs from the API

Individual component pages contain existing reference material. Confirm the current TypeScript props and compare the [interactive examples](https://app-studio-6167b.web.app/docs/components) before copying an older prop value. Report the exact page, package versions, platform, and minimal reproduction when opening an issue.

## Where to ask or contribute

Use the [component repository](https://github.com/rize-network/app-studio-components/issues) for ready-made UI issues and the [framework repository](https://github.com/rize-network/app-studio/issues) for primitives and styling behavior. Include the error message and a small reproduction without credentials or private application data.

---

Source: https://app-studio-6167b.web.app/docs/components

COMPONENT LIBRARY

# Find your building blocks.

Browse the library, try a few controls, then open a component’s reference or its existing examples.

TRY THE REAL THING

## Components you can interact with.

These controls use the library itself. Toggle an option or switch between preview and code.

[Build your first interface](https://app-studio-6167b.web.app/docs/quick-start)

 REAL COMPONENTS. GO AHEAD, TRY THEM.

COMPONENT PREVIEW

### Compose your next interface.

Controlled inputs. Typed callbacks. Shared styling.

Project name

A real TextField and Button. No mockup.

CONTROLLED COMPONENTS

### Inputs and controls.

**Stay in the loop**Only the updates that matter.

Include the good stuff

 All systems go⌘ KNew release

One component. Your style.

Preview

Code

Not a screenshot. Your future building blocks.[Explore Button](https://app-studio-6167b.web.app/button)

77 components

Navigation

## [Accordion](https://app-studio-6167b.web.app/docs/Accordion)

Explore the Accordion component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Accordion)[View examples](https://app-studio-6167b.web.app/accordion)

Feedback

## [Alert](https://app-studio-6167b.web.app/docs/Alert)

Explore the Alert component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Alert)[View examples](https://app-studio-6167b.web.app/alert)

Layout

## [AspectRatio](https://app-studio-6167b.web.app/docs/AspectRatio)

Explore the AspectRatio component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/AspectRatio)[View examples](https://app-studio-6167b.web.app/aspectratio)

Data Display

## [AttachmentGroup](https://app-studio-6167b.web.app/docs/AttachmentGroup)

Explore the AttachmentGroup component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/AttachmentGroup)[View examples](https://app-studio-6167b.web.app/attachment-group)

Inputs

## [Audio Input](https://app-studio-6167b.web.app/docs/AudioInput)

Explore the Audio Input component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/AudioInput)[View examples](https://app-studio-6167b.web.app/audio-input)

Data Display

## [Avatar](https://app-studio-6167b.web.app/docs/Avatar)

Explore the Avatar component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Avatar)[View examples](https://app-studio-6167b.web.app/avatar)

Layout

## [Background](https://app-studio-6167b.web.app/docs/Background)

Explore the Background component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Background)[View examples](https://app-studio-6167b.web.app/background)

Data Display

## [Badge](https://app-studio-6167b.web.app/docs/Badge)

Explore the Badge component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Badge)[View examples](https://app-studio-6167b.web.app/badge)

Inputs

## [BlockEditor](https://app-studio-6167b.web.app/docs/BlockEditor)

Explore the BlockEditor component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/BlockEditor)[View examples](https://app-studio-6167b.web.app/blockeditor)

Inputs

## [Button](https://app-studio-6167b.web.app/docs/Button)

Explore the Button component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Button)[View examples](https://app-studio-6167b.web.app/button)

Layout

## [Card](https://app-studio-6167b.web.app/docs/Card)

Explore the Card component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Card)[View examples](https://app-studio-6167b.web.app/card)

Data Display

## [Carousel](https://app-studio-6167b.web.app/docs/Carousel)

Explore the Carousel component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Carousel)[View examples](https://app-studio-6167b.web.app/carousel)

Layout

## [Center](https://app-studio-6167b.web.app/docs/Center)

Explore the Center component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Center)

Data Display

## [Chart](https://app-studio-6167b.web.app/docs/Chart)

Explore the Chart component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Chart)[View examples](https://app-studio-6167b.web.app/chart)

Experimental

## [Chat](https://app-studio-6167b.web.app/docs/ChatInput)

Explore the Chat component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ChatInput)[View examples](https://app-studio-6167b.web.app/chat)

Experimental

## [ChatWidget](https://app-studio-6167b.web.app/docs/ChatWidget)

Explore the ChatWidget component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ChatWidget)[View examples](https://app-studio-6167b.web.app/chat-widget)

Inputs

## [Checkbox](https://app-studio-6167b.web.app/docs/Checkbox)

Explore the Checkbox component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Checkbox)[View examples](https://app-studio-6167b.web.app/checkbox)

Inputs

## [ColorInput](https://app-studio-6167b.web.app/docs/ColorInput)

Explore the ColorInput component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ColorInput)

Inputs

## [ColorPicker](https://app-studio-6167b.web.app/docs/ColorPicker)

Explore the ColorPicker component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ColorPicker)[View examples](https://app-studio-6167b.web.app/colorpicker)

Inputs

## [ComboBox](https://app-studio-6167b.web.app/docs/ComboBox)

Explore the ComboBox component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ComboBox)[View examples](https://app-studio-6167b.web.app/combobox)

Experimental

## [Command](https://app-studio-6167b.web.app/docs/Command)

Explore the Command component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Command)[View examples](https://app-studio-6167b.web.app/command)

Navigation

## [ContextMenu](https://app-studio-6167b.web.app/docs/ContextMenu)

Explore the ContextMenu component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ContextMenu)[View examples](https://app-studio-6167b.web.app/contextmenu)

Feedback

## [CookieConsent](https://app-studio-6167b.web.app/docs/CookieConsent)

Explore the CookieConsent component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/CookieConsent)[View examples](https://app-studio-6167b.web.app/cookieconsent)

Inputs

## [CountryPicker](https://app-studio-6167b.web.app/docs/CountryPicker)

Explore the CountryPicker component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/CountryPicker)[View examples](https://app-studio-6167b.web.app/countrypicker)

Inputs

## [DatePicker](https://app-studio-6167b.web.app/docs/DatePicker)

Explore the DatePicker component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/DatePicker)[View examples](https://app-studio-6167b.web.app/datepicker)

Experimental

## [Drag and Drop](https://app-studio-6167b.web.app/docs/DragAndDrop)

Explore the Drag and Drop component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/DragAndDrop)[View examples](https://app-studio-6167b.web.app/dragAndDrop)

Layout

## [Drawer](https://app-studio-6167b.web.app/docs/Drawer)

Explore the Drawer component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Drawer)[View examples](https://app-studio-6167b.web.app/drawer)

Navigation

## [DropdownMenu](https://app-studio-6167b.web.app/docs/DropdownMenu)

Explore the DropdownMenu component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/DropdownMenu)[View examples](https://app-studio-6167b.web.app/dropdownmenu)

Experimental

## [DropZone](https://app-studio-6167b.web.app/docs/DropZone)

Explore the DropZone component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/DropZone)[View examples](https://app-studio-6167b.web.app/dropzone)

Experimental

## [EditComponent](https://app-studio-6167b.web.app/docs/EditComponent)

Explore the EditComponent component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/EditComponent)[View examples](https://app-studio-6167b.web.app/edit-component)

Inputs

## [EmojiPicker](https://app-studio-6167b.web.app/docs/EmojiPicker)

Explore the EmojiPicker component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/EmojiPicker)[View examples](https://app-studio-6167b.web.app/emojipicker)

Inputs

## [File](https://app-studio-6167b.web.app/docs/File)

Explore the File component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/File)

Inputs

## [Form](https://app-studio-6167b.web.app/docs/Form)

Explore the Form component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Form)

Inputs

## [Formik](https://app-studio-6167b.web.app/docs/Formik)

Explore the Formik component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Formik)[View examples](https://app-studio-6167b.web.app/formik)

Experimental

## [Gradient](https://app-studio-6167b.web.app/docs/Gradient)

Explore the Gradient component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Gradient)[View examples](https://app-studio-6167b.web.app/gradient)

Layout

## [Horizontal](https://app-studio-6167b.web.app/docs/Horizontal)

Explore the Horizontal component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Horizontal)

Layout

## [HoverCard](https://app-studio-6167b.web.app/docs/HoverCard)

Explore the HoverCard component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/HoverCard)[View examples](https://app-studio-6167b.web.app/hovercard)

Data Display

## [Icon](https://app-studio-6167b.web.app/docs/Icon)

Explore the Icon component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Icon)[View examples](https://app-studio-6167b.web.app/icon)

Inputs

## [IconPicker](https://app-studio-6167b.web.app/docs/IconPicker)

Explore the IconPicker component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/IconPicker)[View examples](https://app-studio-6167b.web.app/iconpicker)

Layout

## [KeyboardAvoidingView](https://app-studio-6167b.web.app/docs/KeyboardAvoidingView)

Explore the KeyboardAvoidingView component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/KeyboardAvoidingView)[View examples](https://app-studio-6167b.web.app/keyboardavoidingview)

Inputs

## [Label](https://app-studio-6167b.web.app/docs/Label)

Explore the Label component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Label)

Navigation

## [Link](https://app-studio-6167b.web.app/docs/Link)

Explore the Link component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Link)[View examples](https://app-studio-6167b.web.app/link)

Feedback

## [Loader](https://app-studio-6167b.web.app/docs/Loader)

Explore the Loader component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Loader)[View examples](https://app-studio-6167b.web.app/loader)

Data Display

## [Markdown](https://app-studio-6167b.web.app/docs/Markdown)

Explore the Markdown component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Markdown)[View examples](https://app-studio-6167b.web.app/markdown)

Navigation

## [Menubar](https://app-studio-6167b.web.app/docs/Menubar)

Explore the Menubar component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Menubar)[View examples](https://app-studio-6167b.web.app/menubar)

Feedback

## [Message](https://app-studio-6167b.web.app/docs/Message)

Explore the Message component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Message)[View examples](https://app-studio-6167b.web.app/message)

Layout

## [Modal](https://app-studio-6167b.web.app/docs/Modal)

Explore the Modal component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Modal)[View examples](https://app-studio-6167b.web.app/modal)

Navigation

## [NavigationMenu](https://app-studio-6167b.web.app/docs/NavigationMenu)

Explore the NavigationMenu component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/NavigationMenu)[View examples](https://app-studio-6167b.web.app/navigationmenu)

Inputs

## [OTP Input](https://app-studio-6167b.web.app/docs/OTPInput)

Explore the OTP Input component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/OTPInput)[View examples](https://app-studio-6167b.web.app/otpinput)

Layout

## [PageLayout](https://app-studio-6167b.web.app/docs/PageLayout)

Explore the PageLayout component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/PageLayout)[View examples](https://app-studio-6167b.web.app/pagelayout)

Navigation

## [Pagination](https://app-studio-6167b.web.app/docs/Pagination)

Explore the Pagination component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Pagination)[View examples](https://app-studio-6167b.web.app/pagination)

Inputs

## [Password](https://app-studio-6167b.web.app/docs/Password)

Explore the Password component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Password)[View examples](https://app-studio-6167b.web.app/password)

Feedback

## [ProgressBar](https://app-studio-6167b.web.app/docs/ProgressBar)

Explore the ProgressBar component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ProgressBar)[View examples](https://app-studio-6167b.web.app/progress-bar)

Layout

## [Resizable](https://app-studio-6167b.web.app/docs/Resizable)

Explore the Resizable component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Resizable)[View examples](https://app-studio-6167b.web.app/resizable)

Navigation

## [Router](https://app-studio-6167b.web.app/docs/Router)

Explore the Router component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Router)[View examples](https://app-studio-6167b.web.app/router)

Inputs

## [Select](https://app-studio-6167b.web.app/docs/Select)

Explore the Select component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Select)[View examples](https://app-studio-6167b.web.app/select)

Inputs

## [Selector](https://app-studio-6167b.web.app/docs/Selector)

Explore the Selector component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Selector)[View examples](https://app-studio-6167b.web.app/selector)

Layout

## [Separator](https://app-studio-6167b.web.app/docs/Separator)

Explore the Separator component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Separator)[View examples](https://app-studio-6167b.web.app/separator)

Utility

## [ShareButton](https://app-studio-6167b.web.app/docs/ShareButton)

Explore the ShareButton component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ShareButton)

Layout

## [Sidebar](https://app-studio-6167b.web.app/docs/Sidebar)

Explore the Sidebar component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Sidebar)[View examples](https://app-studio-6167b.web.app/sidebar)

Inputs

## [Slider](https://app-studio-6167b.web.app/docs/Slider)

Explore the Slider component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Slider)[View examples](https://app-studio-6167b.web.app/slider)

Feedback

## [SplashScreen](https://app-studio-6167b.web.app/docs/SplashScreen)

Explore the SplashScreen component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/SplashScreen)[View examples](https://app-studio-6167b.web.app/splashscreen)

Feedback

## [StatusIndicator](https://app-studio-6167b.web.app/docs/StatusIndicator)

Explore the StatusIndicator component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/StatusIndicator)[View examples](https://app-studio-6167b.web.app/status-indicator)

Inputs

## [Switch](https://app-studio-6167b.web.app/docs/Switch)

Explore the Switch component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Switch)[View examples](https://app-studio-6167b.web.app/switch)

Data Display

## [Table](https://app-studio-6167b.web.app/docs/Table)

Explore the Table component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Table)[View examples](https://app-studio-6167b.web.app/table)

Navigation

## [Tabs](https://app-studio-6167b.web.app/docs/Tabs)

Explore the Tabs component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Tabs)[View examples](https://app-studio-6167b.web.app/tabs)

Inputs

## [TagInput](https://app-studio-6167b.web.app/docs/TagInput)

Explore the TagInput component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/TagInput)[View examples](https://app-studio-6167b.web.app/tagInput)

Data Display

## [Text](https://app-studio-6167b.web.app/docs/Text)

Explore the Text component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Text)

Inputs

## [TextArea](https://app-studio-6167b.web.app/docs/TextArea)

Explore the TextArea component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/TextArea)[View examples](https://app-studio-6167b.web.app/textarea)

Inputs

## [Textfield](https://app-studio-6167b.web.app/docs/TextField)

Explore the Textfield component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/TextField)[View examples](https://app-studio-6167b.web.app/textfield)

Data Display

## [Title](https://app-studio-6167b.web.app/docs/Title)

Explore the Title component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Title)[View examples](https://app-studio-6167b.web.app/title)

Feedback

## [Toast](https://app-studio-6167b.web.app/docs/Toast)

Explore the Toast component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Toast)[View examples](https://app-studio-6167b.web.app/toast)

Inputs

## [Toggle](https://app-studio-6167b.web.app/docs/Toggle)

Explore the Toggle component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Toggle)[View examples](https://app-studio-6167b.web.app/toggle)

Inputs

## [ToggleGroup](https://app-studio-6167b.web.app/docs/ToggleGroup)

Explore the ToggleGroup component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/ToggleGroup)[View examples](https://app-studio-6167b.web.app/togglegroup)

Data Display

## [Tooltip](https://app-studio-6167b.web.app/docs/Tooltip)

Explore the Tooltip component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Tooltip)[View examples](https://app-studio-6167b.web.app/tooltip)

Inputs

## [Upload](https://app-studio-6167b.web.app/docs/Uploader)

Explore the Upload component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Uploader)[View examples](https://app-studio-6167b.web.app/upload)

Layout

## [Vertical](https://app-studio-6167b.web.app/docs/Vertical)

Explore the Vertical component, its variants, and its interactions.

[Reference](https://app-studio-6167b.web.app/docs/Vertical)

---

Source: https://app-studio-6167b.web.app/docs/AspectRatio

@app-studio/components

# AspectRatio

This component ensures its content maintains a specified aspect ratio, adjusting its size responsively while preserving visual proportions.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AspectRatio/AspectRatio.tsx)

## Import

```ts
import { AspectRatio } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Image } from 'app-studio';
import { AspectRatio } from '@app-studio/components';

export const DefaultDemo = () => {
  return (
    <AspectRatio>
      <Image
        alt="image"
        objectFit="cover"
        width="100%"
        height="100%"
        src="https://t3.ftcdn.net/jpg/02/82/15/88/360_F_282158853_VtXRiSiN5eCjPddHobErJewxJ65lYZGt.jpg"
      />
    </AspectRatio>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**AspectRatio**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ratio` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AspectRatio/AspectRatio/AspectRatio.props.tsx#L6) |
| `views` | `{ container?: ViewProps; center?: ViewProps; view?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AspectRatio/AspectRatio/AspectRatio.props.tsx#L7) |

Common inherited styling props (7)

**AspectRatio inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Background

@app-studio/components

# Background

A comprehensive collection of background effects, including animated particles, gradients, images, and videos.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background.tsx)

## Import

```ts
import { Background } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Background } from '@app-studio/components';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultDemo = () => (
  <Vertical gap={32}>
    <Text fontSize={16} fontWeight="600">
      Background Component Examples
    </Text>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Aurora Background
      </Text>
      <Background.Aurora height="200px" showRadialGradient={true}>
        <Text color="white" fontSize={18} fontWeight="500">
          Aurora Effect Background
        </Text>
      </Background.Aurora>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Meteors Effect
      </Text>
      <Background.Meteors number={15} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Wall Effect
      </Text>
      <Background.Wall rows={15} cols={10} squareSize={40} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Particles Effect
      </Text>
      <Background.Particles
        count={30}
        speed="medium"
        shapes={['circle', 'square']}
      />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Grid Effect
      </Text>
      <Background.Grid gridSize={25} animationSpeed="medium" />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Ripples Effect
      </Text>
      <Background.Ripples rippleCount={4} maxSize={150} frequency={2} />
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Background Image
      </Text>
      <Background.Image
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop"
        height="200px"
        backgroundSize="cover"
        blendMode="multiply"
        overlay={<Background.Overlay />}
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Image Background with Overlay
        </Text>
      </Background.Image>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Background Gradient
      </Text>
      <Background.Gradient
        from="color-blue-500"
        to="color-purple-500"
        height="200px"
        animate={true}
        animationDuration={4}
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Animated Gradient Background
        </Text>
      </Background.Gradient>
    </Vertical>

    <Vertical gap={16}>
      <Text fontSize={14} color="color-gray-600">
        Multi-color Gradient
      </Text>
      <Background.Gradient
        type="radial"
        colors={[
          { color: 'color-red-500', position: '0%' },
          { color: 'color-orange-500', position: '50%' },
          { color: 'color-yellow-500', position: '100%' },
        ]}
        height="200px"
        shape="ellipse"
        position="top-left"
      >
        <Text color="white" fontSize={18} fontWeight="500">
          Radial Multi-color Gradient
        </Text>
      </Background.Gradient>
    </Vertical>
  </Vertical>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Background**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L14) |
| `shape` | `"square" \| "rounded" \| "pill"` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

Common inherited styling props (7)

**Background inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Background.Layout

**Background.Layout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L33) |
| `views` | `{ container?: ViewProps; content?: ViewProps; back?: ViewProps; front?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L35) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Aurora

**Background.Aurora**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showRadialGradient` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L48) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L14) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Meteors

**Background.Meteors**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `number` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L52) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L54) |

### Background.Wall

**Background.Wall**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L58) |
| `cols` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L60) |
| `squareSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L62) |

### Background.Particles

**Background.Particles**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L66) |
| `colors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L68) |
| `speed` | `"slow" \| "medium" \| "fast"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L70) |
| `shapes` | `("circle" \| "square" \| "triangle")[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L72) |

### Background.Grid

**Background.Grid**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `gridSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L76) |
| `lineColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L78) |
| `pulseColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L80) |
| `animationSpeed` | `"slow" \| "medium" \| "fast"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L82) |

### Background.Ripples

**Background.Ripples**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rippleCount` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L86) |
| `colors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L88) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L90) |
| `frequency` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L92) |

### Background.Image

**Background.Image**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` Required | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L97) |
| `backgroundSize` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<bg-size>#` **Initial value**: `auto auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :---: \| \| **3** \| **4** \| **5** \| **12** \| **9** \| \| 1 _-x-_ \| \| 3 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L99) |
| `backgroundPosition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<bg-position>#` **Initial value**: `0% 0%` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L101) |
| `backgroundRepeat` | `BackgroundRepeat` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<repeat-style>#` **Initial value**: `repeat` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L103) |
| `backgroundAttachment` | `"scroll" \| "fixed" \| "local"` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<attachment>#` **Initial value**: `scroll` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L105) |
| `imageOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L107) |
| `blendMode` | `BlendMode` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L109) |
| `overlay` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L111) |
| `views` | `{ container?: ViewProps; content?: ViewProps; image?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L113) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Video

**Background.Video**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` Required | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L125) |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L127) |
| `loop` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L129) |
| `muted` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L131) |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L133) |
| `overlay` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L135) |
| `blendMode` | `BlendMode` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L137) |
| `views` | `{ container?: ViewProps; content?: ViewProps; video?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L139) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L12) |
| `shape` | `"square" \| "rounded" \| "pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L23) |
| `decorationRotation` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L25) |
| `decorationScale` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L27) |
| `decorationOpacity` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L29) |

### Background.Gradient

**Background.Gradient**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `GradientType` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L17) |
| `direction` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L19) |
| `shape` | `RadialShape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L21) |
| `position` | `string` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L23) |
| `from` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L25) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L27) |
| `colors` | `ColorStop[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L29) |
| `animate` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L31) |
| `animationDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L33) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L35) |
| `views` | `GradientStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L37) |

### Background.Overlay

**Background.Overlay**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `contentPosition` | `"bottom" \| "left" \| "right" \| "top" \| "center"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Background/Background/Background.props.ts#L152) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Card

@app-studio/components

# Card

A versatile card component for displaying content in a contained, styled box with support for headers, content, and footers.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card.tsx)

## Import

```ts
import { Card } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Card } from '@app-studio/components';
import { Text } from 'app-studio';

export const DefaultDemo = () => {
  return (
    <Card>
      <Text>This is a default card with simple content.</Text>
    </Card>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Card**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `Variant` `"default"``"outlined"``"elevated"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L5) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L7) |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L9) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L11) |
| `header` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L13) |
| `footer` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L15) |
| `isFullWidth` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L17) |
| `views` | `CardStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L19) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L22) |

Common inherited styling props (7)

**Card inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Card.Header

**Card.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L26) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L28) |

### Card.Content

**Card.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L32) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L34) |

### Card.Footer

**Card.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L38) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Card/Card/Card.props.ts#L40) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Drawer

@app-studio/components

# Drawer

A slide-out panel component that appears from the edge of the screen, with support for different placements, sizes, and content sections.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer.tsx)

## Import

```ts
import { Drawer } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Button, Drawer } from '@app-studio/components';
import { Vertical, Text } from 'app-studio';

export const DefaultDrawer = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Vertical>
      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Drawer.Header onClose={() => setIsOpen(false)}>
          <Text fontWeight="bold">Drawer Title</Text>
        </Drawer.Header>
        <Drawer.Body>
          <Text>This is the body of the drawer.</Text>
        </Drawer.Body>
        <Drawer.Footer>
          <Button variant="outline" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Save</Button>
        </Drawer.Footer>
      </Drawer>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Drawer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placement` | `Placement` `"bottom"``"left"``"right"``"top"` | `—` | Placement relative to its trigger or container.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L6) |
| `side` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L8) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"``"full"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L10) |
| `isOpen` Required | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L12) |
| `onClose` Required | `() => void` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L14) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L16) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L18) |

Common inherited styling props (7)

**Drawer inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Drawer.Overlay

**Drawer.Overlay**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isOpen` Required | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L44) |
| `onClose` Required | `() => void` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L46) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L48) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L50) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L52) |

### Drawer.Container

**Drawer.Container**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placement` | `Placement` | `—` | Placement relative to its trigger or container.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L56) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L58) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L60) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L62) |

### Drawer.Header

**Drawer.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L66) |
| `buttonPosition` | `CloseButtonPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L68) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L70) |

### Drawer.Body

**Drawer.Body**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L74) |

### Drawer.Footer

**Drawer.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L78) |

### Drawer.Layout

**Drawer.Layout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `drawers` Required | `{ [key: string]: React.ComponentType<any>; }` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L22) |
| `onShow` | `((name: string, props?: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L24) |
| `onHide` | `((name?: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Drawer/Drawer/Drawer.props.ts#L26) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/PageLayout

@app-studio/components

# PageLayout

Compose an application screen with structured header, content, and footer regions.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.tsx)

## Import

```ts
import { PageLayout } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, Text, View, Vertical } from 'app-studio';
import { Button, PageLayout } from '@app-studio/components';

/**
 * A bordered, fixed-height frame stands in for a device screen so the pinned
 * header/footer and scrollable middle are visible in the gallery.
 */
export const DefaultPageLayout = () => (
  <View
    height={420}
    width="100%"
    maxWidth={360}
    borderRadius={16}
    overflow="hidden"
    borderWidth={1}
    borderStyle="solid"
    borderColor="color-gray-200"
  >
    <PageLayout
      safe={false}
      header={
        <Horizontal
          padding={16}
          backgroundColor="color-blue-500"
          justifyContent="center"
        >
          <Text color="color-white" fontWeight="bold">
            Pinned Header
          </Text>
        </Horizontal>
      }
      footer={
        <View padding={12} backgroundColor="color-white">
          <Button width="100%">Submit</Button>
        </View>
      }
    >
      <Vertical padding={16} gap={12}>
        {Array.from({ length: 20 }).map((_, i) => (
          <View
            key={i}
            padding={16}
            borderRadius={8}
            backgroundColor="color-gray-100"
          >
            <Text>Scrollable row {i + 1}</Text>
          </View>
        ))}
      </Vertical>
    </PageLayout>
  </View>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**PageLayout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `header` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Pinned header rendered above the scrollable content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L13) |
| `footer` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Pinned footer (e.g. a submit bar). It rides above the keyboard on native because it sits inside the keyboard-avoiding region.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L18) |
| `isLoading` | `boolean` | `false` | Replace the content with a centered Loader.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L20) |
| `safe` | `boolean` | `true` | Apply device safe-area insets to the outer container. Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L22) |
| `scrollable` | `boolean` | `true` | Make the content area scroll when it overflows. Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L24) |
| `dismissKeyboardOnTap` | `boolean` | `true` | Tap an empty area to dismiss the keyboard (native only). Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L26) |
| `keyboardVerticalOffset` | `number` | `0` | Offset for the keyboard-avoiding region, e.g. a fixed header height.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L28) |
| `views` | `PageLayoutViews` | `{}` | Per-slot style overrides.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L30) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/PageLayout/PageLayout.types.ts#L31) |

Common inherited styling props (7)

**PageLayout inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/KeyboardAvoidingView

@app-studio/components

# KeyboardAvoidingView

Keep form content usable when the on-screen keyboard appears. Browser previews illustrate layout; native keyboard behavior depends on the target platform.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.tsx)

## Import

```ts
import { KeyboardAvoidingView } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Text, View, Vertical } from 'app-studio';
import { KeyboardAvoidingView, TextField } from '@app-studio/components';

/**
 * On native, focusing a field lifts this content above the keyboard and a tap
 * on empty space dismisses it. On web it renders as a plain flex container.
 */
export const DefaultKeyboardAvoidingView = () => (
  <View
    height={320}
    width="100%"
    maxWidth={360}
    borderRadius={16}
    overflow="hidden"
    borderWidth={1}
    borderStyle="solid"
    borderColor="color-gray-200"
  >
    <KeyboardAvoidingView dismissOnTap>
      <Vertical flex={1} justifyContent="flex-end" padding={16} gap={12}>
        <Text color="color-gray-500">Tap empty space to dismiss</Text>
        <TextField name="email" label="Email" />
        <TextField name="message" label="Message" />
      </Vertical>
    </KeyboardAvoidingView>
  </View>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**KeyboardAvoidingView**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `behavior` | `"height" \| "position" \| "padding"` `"height"``"position"``"padding"` | `—` | How the view reacts to the on-screen keyboard (native only). Defaults to 'padding' on iOS and 'height' on Android — the combination that behaves best in practice. Ignored on web.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.types.ts#L10) |
| `keyboardVerticalOffset` | `number` | `—` | Distance between the top of the keyboard and the focused field (native only) — e.g. to account for a fixed header. Ignored on web.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.types.ts#L15) |
| `dismissOnTap` | `boolean` | `—` | When true, tapping an empty (non-input) area dismisses the keyboard (native only). Web browsers reflow around their own keyboard, so this is a no-op there.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.types.ts#L21) |
| `enabled` | `boolean` | `—` | Enable/disable the avoiding behavior (native only). Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.types.ts#L23) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/KeyboardAvoidingView/KeyboardAvoidingView.types.ts#L24) |

Common inherited styling props (7)

**KeyboardAvoidingView inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/SplashScreen

@app-studio/components

# SplashScreen

Display an application loading or startup screen with configurable content and presentation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.tsx)

## Import

```ts
import { SplashScreen } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Text, View } from 'app-studio';
import { Button, SplashScreen } from '@app-studio/components';

/**
 * Demonstrates the controlled `isLoaded` flow inside a bordered frame. "Reload"
 * re-shows the splash; it fades out automatically after ~1.2s.
 */
export const DefaultSplashScreen = () => {
  const [loaded, setLoaded] = useState(false);
  const [run, setRun] = useState(0);

  const start = () => {
    setLoaded(false);
    setRun((n) => n + 1);
    setTimeout(() => setLoaded(true), 1200);
  };

  return (
    <View
      position="relative"
      height={360}
      width="100%"
      maxWidth={360}
      borderRadius={16}
      overflow="hidden"
      borderWidth={1}
      borderStyle="solid"
      borderColor="color-gray-200"
    >
      <View
        flex={1}
        padding={16}
        gap={12}
        alignItems="center"
        justifyContent="center"
      >
        <Text>App content is ready.</Text>
        <Button onClick={start}>Reload splash</Button>
      </View>
      {run > 0 && (
        <SplashScreen
          key={run}
          isLoaded={loaded}
          logo={
            <View
              width={96}
              height={96}
              borderRadius={24}
              backgroundColor="color-blue-500"
            />
          }
        />
      )}
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**SplashScreen**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logo` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Custom logo node. Takes precedence over `logoSrc`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L6) |
| `logoSrc` | `string` | `—` | Image URL used for the logo when `logo` isn't provided.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L8) |
| `loader` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Custom loading indicator. Defaults to the `Loader` component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L10) |
| `showLoader` | `boolean` | `true` | Show the loading indicator under the logo. Default true.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L12) |
| `duration` | `number` | `600` | Exit animation duration in ms (also the unmount delay). Default 600.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L14) |
| `isLoaded` | `boolean` | `—` | Controlled "loaded" flag. When omitted the component reads the shared `useSplashStore`. When the flag flips true, the splash fades out and unmounts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L20) |
| `onHidden` | `(() => void)` | `—` | Called once the exit animation completes and the splash unmounts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L22) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/SplashScreen/SplashScreen.types.ts#L23) |

Common inherited styling props (7)

**SplashScreen inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Router

@app-studio/components

# Router

Render a route from the shared history store. Navigate between screens and optionally synchronize the browser address bar.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.tsx)

## Import

```ts
import { Router } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Text, Vertical, Horizontal, View } from 'app-studio';
import { Button, Router, useHistory } from '@app-studio/components';

const Home = () => {
  const { push } = useHistory();
  return (
    <Vertical gap={12} padding={16}>
      <Text fontWeight="bold">Home</Text>
      <Button onClick={() => push('/profile/42')}>Go to profile 42</Button>
    </Vertical>
  );
};

const Profile = ({ id }: { id?: string }) => {
  const { back, canGoBack } = useHistory();
  return (
    <Vertical gap={12} padding={16}>
      <Text fontWeight="bold">Profile #{id}</Text>
      <Button variant="outline" isDisabled={!canGoBack} onClick={() => back()}>
        Back
      </Button>
    </Vertical>
  );
};

/**
 * A tiny two-screen app driven by the shared history store. On native the
 * Android hardware Back button maps to `back()` automatically.
 */
export const DefaultRouter = () => (
  <View
    height={240}
    width="100%"
    maxWidth={360}
    borderRadius={16}
    overflow="hidden"
    borderWidth={1}
    borderStyle="solid"
    borderColor="color-gray-200"
  >
    <Horizontal padding={8} backgroundColor="color-gray-100">
      <Text color="color-gray-500">Mini Router demo</Text>
    </Horizontal>
    <Router
      initialPath="/"
      routes={[
        { path: '/', component: Home },
        { path: '/profile/:id', component: Profile },
      ]}
    />
  </View>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Router**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `routes` Required | `RouteConfig[] \| Record<string, React.ComponentType<any>>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L15) |
| `initialPath` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L17) |
| `notFound` | `React.ComponentType<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L19) |
| `syncBrowserHistory` | `boolean` | `false` | Reflect navigation to the browser URL and honour the browser Back button (web only, default false). Native always honours the hardware Back button.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Router/Router.types.ts#L24) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/HoverCard

@app-studio/components

# HoverCard

Displays rich content on hover, with customizable trigger and content presentation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard.tsx)

## Import

```ts
import { HoverCard } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { HoverCard } from '@app-studio/components';
import { Text, Vertical, View } from 'app-studio';
import { Button } from '@app-studio/components';

export const DefaultHoverCard = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <View>
        <Text marginBottom={10}>Default HoverCard</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button>Hover Me</Button>
          </HoverCard.Trigger>
          <HoverCard.Content>
            <Text>
              The React Framework – created and maintained by @vercel.
            </Text>
          </HoverCard.Content>
        </HoverCard>
      </View>

      <View>
        <Text marginBottom={10}>HoverCard with different positions</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button>Hover for Top Position</Button>
          </HoverCard.Trigger>
          <HoverCard.Content side="top">
            <Text>This content appears above the trigger.</Text>
          </HoverCard.Content>
        </HoverCard>
      </View>

      <View>
        <Text marginBottom={10}>HoverCard with custom styling</Text>
        <HoverCard>
          <HoverCard.Trigger>
            <Button variant="outline">Custom Styled HoverCard</Button>
          </HoverCard.Trigger>
          <HoverCard.Content
            views={{
              container: {
                backgroundColor: 'color-blue',
                color: 'color-white',
                borderRadius: '8px',
                padding: '16px',
              },
            }}
          >
            <Text color="white">
              This HoverCard has custom styling with a primary background color-
            </Text>
          </HoverCard.Content>
        </HoverCard>
      </View>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**HoverCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L6) |
| `views` | `{ container?: ViewProps; content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L8) |
| `openDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L15) |
| `closeDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L17) |

### HoverCard.Trigger

**HoverCard.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L22) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L24) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L29) |

### HoverCard.Content

**HoverCard.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L36) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L38) |
| `side` | `"bottom" \| "left" \| "right" \| "top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L43) |
| `align` | `"start" \| "center" \| "end"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L45) |
| `sideOffset` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/HoverCard/HoverCard/HoverCard.props.ts#L47) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Modal

@app-studio/components

# Modal

A custom content overlay that appears on top of the main screen, with support for headers, bodies, footers, and flexible positioning.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal.tsx)

## Import

```ts
import { Modal } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

import { Modal } from '@app-studio/components';
import { hideModal, showModal } from '@app-studio/components';

export const DefaultModal = () => {
  return (
    <>
      <Button onClick={() => showModal('DefaultModal')} isAuto>
        Blur Overlay
      </Button>
      <Modal.Layout
        modals={{
          DefaultModal: () => (
            <Modal.Container>
              <Modal.Header>
                <Text size="lg" weight="semiBold">
                  Title
                </Text>
              </Modal.Header>
              <Modal.Body>
                <Text>
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                  Cras mattis consectetur purus sit amet fermentum. Cras justo
                  odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
                  risus, porta ac consectetur ac, vestibulum at eros. Praesent
                  commodo cursus magna, vel scelerisque nisl consectetur et.
                </Text>
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={hideModal}>Cancel</Button>
              </Modal.Footer>
            </Modal.Container>
          ),
        }}
      />
    </>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Modal**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `buttonColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L9) |
| `iconSize` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L11) |
| `shape` | `Shape` `"square"``"rounded"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L13) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L15) |
| `buttonPosition` | `CloseButtonPosition` `"left"``"right"``"none"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L17) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L19) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L21) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L23) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L25) |
| `position` | `Position` `"bottom"``"left"``"right"``"top"``"center"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L27) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L29) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L31) |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L33) |

Common inherited styling props (7)

**Modal inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Modal.Overlay

**Modal.Overlay**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L53) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L55) |
| `isOpen` Required | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L57) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L59) |
| `position` | `Position` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L61) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L63) |
| `onClose` Required | `() => void` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L65) |

### Modal.Container

**Modal.Container**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L105) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L110) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L112) |
| `isFullScreen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L114) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L116) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L118) |
| `isClosePrevented` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L120) |
| `blur` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L122) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L124) |
| `buttonColor` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L126) |
| `buttonPosition` | `CloseButtonPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L128) |
| `position` | `Position` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L130) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L132) |

### Modal.Header

**Modal.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; header?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L70) |
| `buttonColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L77) |
| `iconSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L79) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L81) |
| `buttonPosition` | `CloseButtonPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L83) |
| `buttonSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L86) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L88) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L90) |

### Modal.Body

**Modal.Body**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ view?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L137) |
| `buttonColor` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L142) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L144) |

### Modal.Footer

**Modal.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L149) |

### Modal.Layout

**Modal.Layout**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modals` Required | `{ [x: string]: React.FC<any>; }` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L95) |
| `onShow` | `((name: string, props?: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L97) |
| `onHide` | `((name?: string, props?: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Modal/Modal/Modal.props.ts#L99) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Resizable

@app-studio/components

# Resizable

A flexible container that allows users to resize its content areas by dragging adjustable dividers.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable.tsx)

## Import

```ts
import { Resizable } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Resizable } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Button } from '@app-studio/components';
import { Horizontal } from 'app-studio';

export const ControlledResizable = () => {
  const [sizes, setSizes] = useState([33.33, 33.33, 33.33]);

  const handleSizesChange = (newSizes: number[]) => {
    setSizes(newSizes);
  };

  const resetSizes = () => {
    setSizes([33.33, 33.33, 33.33]);
  };

  const maximizeFirst = () => {
    setSizes([60, 20, 20]);
  };

  const maximizeMiddle = () => {
    setSizes([20, 60, 20]);
  };

  const maximizeLast = () => {
    setSizes([20, 20, 60]);
  };

  return (
    <View>
      <Horizontal gap={10} marginBottom={16}>
        <Button onClick={resetSizes}>Reset</Button>
        <Button onClick={maximizeFirst}>Maximize First</Button>
        <Button onClick={maximizeMiddle}>Maximize Middle</Button>
        <Button onClick={maximizeLast}>Maximize Last</Button>
      </Horizontal>

      <Text marginBottom={10}>
        Current sizes: [{sizes.map((size) => Math.round(size)).join('%, ')}%]
      </Text>

      <View
        height="300px"
        width="100%"
        border="1px solid #e2e8f0"
        borderRadius="8px"
        overflow="hidden"
      >
        <Resizable defaultSizes={sizes} onSizesChange={handleSizesChange}>
          <Resizable.Panel id="panel1" defaultSize={`${sizes[0]}%`}>
            <View padding="16px" height="100%" backgroundColor="color-blue-50">
              <Text fontWeight="bold" marginBottom="8px">
                Panel 1
              </Text>
              <Text>Size: {Math.round(sizes[0])}%</Text>
            </View>
          </Resizable.Panel>

          <Resizable.Handle id="handle1" withVisualIndicator />

          <Resizable.Panel id="panel2" defaultSize={`${sizes[1]}%`}>
            <View padding="16px" height="100%" backgroundColor="color-green-50">
              <Text fontWeight="bold" marginBottom="8px">
                Panel 2
              </Text>
              <Text>Size: {Math.round(sizes[1])}%</Text>
            </View>
          </Resizable.Panel>

          <Resizable.Handle id="handle2" withVisualIndicator />

          <Resizable.Panel id="panel3" defaultSize={`${sizes[2]}%`}>
            <View
              padding="16px"
              height="100%"
              backgroundColor="color-purple-50"
            >
              <Text fontWeight="bold" marginBottom="8px">
                Panel 3
              </Text>
              <Text>Size: {Math.round(sizes[2])}%</Text>
            </View>
          </Resizable.Panel>
        </Resizable>
      </View>
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Resizable**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L13) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L17) |
| `variant` | `Variant` `"default"``"subtle"``"prominent"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L19) |
| `defaultSizes` | `(string \| number)[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L21) |
| `onSizesChange` | `((sizes: number[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L23) |
| `minSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L25) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L27) |
| `collapsible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L29) |
| `autoSaveId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L31) |
| `storage` | `ResizableStorage` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L33) |
| `keyboardResizeBy` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L35) |
| `views` | `ResizableStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L37) |

### Resizable.Panel

**Resizable.Panel**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L42) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L44) |
| `defaultSize` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L46) |
| `minSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L48) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L50) |
| `collapsible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L52) |
| `defaultCollapsed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L54) |
| `onCollapseChange` | `((collapsed: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L56) |
| `views` | `{ panel?: ViewProps; collapsedPanel?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L58) |

### Resizable.Handle

**Resizable.Handle**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L66) |
| `position` | `HandlePosition` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L68) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L70) |
| `withVisualIndicator` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L72) |
| `withCollapseButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L74) |
| `collapseTarget` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L76) |
| `views` | `{ handle?: ViewProps; handleIcon?: ViewProps; collapseIcon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Resizable/Resizable/Resizable.props.ts#L78) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Separator

@app-studio/components

# Separator

A visual element used to divide or group content on a user interface.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator.tsx)

## Import

```ts
import { Separator } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Separator } from '@app-studio/components';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const DefaultSeparator = () => {
  return (
    <Vertical width="100%" gap={16}>
      <Text>Default Separator</Text>
      <Text>
        This is some text above the separator. The separator helps to visually
        divide content sections.
      </Text>
      <Separator />
      <Text>
        This is some text below the separator. Notice how the separator creates
        a clear visual distinction between content areas.
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Separator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L10) |
| `variant` | `Variant` `"solid"``"dashed"``"dotted"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L12) |
| `thickness` | `Thickness` `"medium"``"thin"``"thick"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L14) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L16) |
| `spacing` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L18) |
| `label` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L20) |
| `decorative` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L22) |
| `views` | `SeparatorStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Separator/Separator/Separator.props.ts#L24) |

Common inherited styling props (7)

**Separator inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Sidebar

@app-studio/components

# Sidebar

A versatile layout component for navigation or content, typically positioned at the screen edges.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar.tsx)

## Import

```ts
import { Sidebar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Sidebar } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function SidebarExample() {
  const [page, setPage] = useState('Overview');
  return (
    <Vertical height={280} width="100%" maxWidth={340} overflow="hidden">
      <Sidebar fixed={false} defaultExpanded>
        <Sidebar.Header>
          <Text fontWeight="bold">Workspace</Text>
        </Sidebar.Header>
        <Sidebar.Content>
          {['Overview', 'Projects', 'Settings'].map((item) => (
            <Button
              key={item}
              variant={page === item ? 'subtle' : 'ghost'}
              onClick={() => setPage(item)}
            >
              {item}
            </Button>
          ))}
        </Sidebar.Content>
        <Sidebar.Footer>
          <Text role="status">Current page: {page}</Text>
        </Sidebar.Footer>
      </Sidebar>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Sidebar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L15) |
| `position` | `Position` `"left"``"right"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L17) |
| `size` | `Size` `"sm"``"md"``"lg"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L19) |
| `variant` | `Variant` `"outline"``"default"``"elevated"``"subtle"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L21) |
| `defaultExpanded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L23) |
| `expanded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L25) |
| `onExpandedChange` | `((expanded: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L27) |
| `fixed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L29) |
| `hasBackdrop` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L31) |
| `showToggleButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L33) |
| `expandedWidth` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L35) |
| `collapsedWidth` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L37) |
| `breakpoint` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L39) |
| `breakpointBehavior` | `BreakpointBehavior` `"overlay"``"collapse"``"hide"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L41) |
| `elevation` | `Elevation` `"medium"``"none"``"low"``"high"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L43) |
| `transitionPreset` | `TransitionPreset` `"slow"``"fast"``"normal"``"bounce"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L45) |
| `ariaLabel` | `string` | `—` | Accessible name for the control, especially when it has no visible label.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L47) |
| `views` | `SidebarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L49) |

### Sidebar.Header

**Sidebar.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L55) |
| `showToggleButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L57) |
| `views` | `{ header?: ViewProps; toggleButton?: ViewProps; toggleButtonIcon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L59) |

### Sidebar.Content

**Sidebar.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L72) |
| `views` | `{ content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L74) |

### Sidebar.Footer

**Sidebar.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L83) |
| `views` | `{ footer?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L85) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/BlockEditor

@app-studio/components

# BlockEditor

A Markdown block editor built from App Studio primitives, without an external editor engine.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor.tsx)

## Import

```ts
import { BlockEditor } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { BlockEditor } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function BlockEditorExample() {
  const [value, setValue] = useState(
    '# Project notes\n\nSelect a block to edit its content.'
  );
  const [saved, setSaved] = useState('');
  return (
    <Vertical gap={16} width="100%">
      <BlockEditor
        label="Project notes"
        value={value}
        onChange={setValue}
        onSave={() => setSaved(value)}
      />
      <Text role="status">
        {saved ? 'Document saved in this example.' : 'Changes stay local.'}
      </Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**BlockEditor**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L16) |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L17) |
| `onChange` | `((markdown: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L18) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L19) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L20) |
| `isReadOnly` | `boolean` | `—` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L21) |
| `onSave` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L22) |
| `uploadMedia` | `((file: EditorMediaFile, options: { signal: AbortSignal; }) => Promise<EditorMediaResult>)` | `—` | Upload one user-selected file. The application owns storage and authorization.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L24) |
| `pickMedia` | `(() => Promise<EditorMediaFile \| null>)` | `—` | Native applications supply their real picker; null means user cancellation.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L29) |
| `generate` | `((prompt: string, fragment: string, scope: "selection" \| "section") => Promise<string>)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L30) |
| `status` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L35) |
| `labels` | View type `Partial<{ document: string; paragraph: string; h1: string; h2: string; h3: string; bullet: string; number: string; quote: string; codeBlock: string; table: string; blocks: string; below: string; duplicate: string; delete: string; up: string; down: string; drag: string; bold: string; italic: string; underline: string; strikethrough: string; code: string; link: string; linkUrl: string; invalidLink: string; media: string; image: string; video: string; mediaUrl: string; mediaDescription: string; mediaSource: string; invalidMedia: string; upload: string; uploading: string; pickingMedia: string; uploadError: string; cancelUpload: string; mediaStale: string; undo: string; redo: string; source: string; visual: string; emoji: string; sourceFallback: string; selectionToolbar: string; askSelection: string; askSection: string; aiPanel: string; instruction: string; generating: string; aiError: string; proposal: string; apply: string; discard: string; cancel: string; retry: string; generate: string; stale: string; selectionRequired: string; save: string; empty: string; }>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L36) |
| `views` | `{ container?: ViewProps; toolbar?: ViewProps; block?: ViewProps; content?: ViewProps; source?: ViewProps; notice?: ViewProps; panel?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/BlockEditor/BlockEditor/BlockEditor.props.ts#L37) |

Common inherited styling props (7)

**BlockEditor inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/AudioInput

@app-studio/components

# Audio Input

Provides a user interface for recording, playing, and uploading audio content.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AudioInput/AudioInput.tsx)

## Import

```ts
import { AudioInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { AudioInput } from '@app-studio/components';
import { View, Text, Button } from 'app-studio';

export const Default = () => {
  const [audioFile, setAudioFile] = useState<File | null>(null);

  const handleAudio = (file: File) => {
    setAudioFile(file);
  };

  return (
    <View flexDirection="column" gap={4} padding={4} alignItems="flex-start">
      <Text variant="heading" size="lg">
        Audio Input Example
      </Text>
      <AudioInput onAudio={handleAudio} />
      {audioFile && (
        <View flexDirection="column" gap={2}>
          <Text>
            Recorded Audio: <Text fontWeight="600">{audioFile.name}</Text> (
            {(audioFile.size / 1024).toFixed(2)} KB)
          </Text>
          <View
            padding={8}
            borderRadius={4}
            backgroundColor="color-gray-100"
            borderWidth={1}
            borderStyle="solid"
            borderColor="color-gray-200"
          >
            <Text color="color-gray-600">Audio preview placeholder</Text>
          </View>
          <Button onPress={() => setAudioFile(null)}>Clear Audio</Button>
        </View>
      )}
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**AudioInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onAudio` Required | `(file: File) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AudioInput/AudioInput/AudioInput.props.ts#L5) |

Common inherited styling props (7)

**AudioInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Button

@app-studio/components

# Button

A versatile button component for user interaction with various styles, sizes, shapes, and interactive effects.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button.tsx)

## Import

```ts
import { Button } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Button } from '@app-studio/components';
import { Horizontal, Text } from 'app-studio';

export function ButtonExample() {
  const [count, setCount] = useState(0);
  return (
    <Horizontal gap={16} alignItems="center" flexWrap="wrap">
      <Button onClick={() => setCount(count + 1)}>Run action</Button>
      <Button variant="outline" onClick={() => setCount(0)}>
        Reset
      </Button>
      <Text role="status">{count} actions completed</Text>
    </Horizontal>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Button**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L19) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` `"left"``"right"` | `'left'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` `"bottom"``"left"``"right"``"top"` | `'left'` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L33) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `true` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `onClick` | `((...args: any) => any)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L41) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L43) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `'rounded'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `variant` | `string` | `'filled'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `animation` | `Animation` `"borderMoving"``"animatedStroke"``"borderReveal"` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `reversed` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `borderMovingDuration` | `number` | `2` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `['#705CFF', '#FF5C97', '#FFC75C']` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `'#705CFF'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `'color-gray-900'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `views` | `{ container?: ViewProps; content?: ViewProps; loader?: ViewProps; icon?: ViewProps; link?: ViewProps; }` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L88) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `label` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L99) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `startIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `endIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

Common inherited styling props (6)

**Button inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Checkbox

@app-studio/components

# Checkbox

A customizable checkbox form element with optional label and various views.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox.tsx)

## Import

```ts
import { Checkbox } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Checkbox } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function CheckboxExample() {
  const [selected, setSelected] = useState(false);
  return (
    <Vertical gap={12}>
      <Checkbox
        label="Include release notes"
        isChecked={selected}
        onChange={setSelected}
      />
      <Text role="status">
        Release notes {selected ? 'included' : 'excluded'}.
      </Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Checkbox**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L9) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L10) |
| `error` | `any` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L11) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L12) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L13) |
| `isChecked` | `boolean` | `—` | Current checked state. Update it from the onChange callback to keep the control controlled.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L14) |
| `defaultIsSelected` | `boolean` | `false` | Initial checked state when uncontrolled.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L15) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L16) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L17) |
| `isIndeterminate` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L18) |
| `labelPosition` | `"left" \| "right"` `"left"``"right"` | `'right'` | Position of the visible label relative to the control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L19) |
| `onChange` | `((checked: boolean) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L23) |
| `onValueChange` | `((checked: boolean) => void)` | `—` | Called when the selected value changes.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L25) |
| `views` | `CheckboxStyles` | `{ checkbox: {}, label: {} }` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L26) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L27) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L28) |
| `infoText` | `string` | `—` | Additional explanatory text displayed with the control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Checkbox/Checkbox/Checkbox.props.ts#L29) |

Common inherited styling props (7)

**Checkbox inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ColorPicker

@app-studio/components

# ColorPicker

A customizable color picker component with predefined colors, custom input, recent colors, and various color formats.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker.tsx)

## Import

```ts
import { ColorPicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Vertical, Horizontal } from 'app-studio';
import { ColorPicker } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

export const ControlledColorPicker = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedColor, setSelectedColor] = useState('color-purple-500');

  return (
    <Vertical gap={16}>
      <Text fontWeight="bold">Controlled ColorPicker</Text>

      <ColorPicker
        label="Controlled Color Picker"
        value={selectedColor}
        isOpen={isOpen}
        onChange={setSelectedColor}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        closeOnSelect={false}
        placeholder="Controlled picker"
      />

      <Horizontal gap={8}>
        <Button variant="outline" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? 'Close' : 'Open'} Picker
        </Button>

        <Button
          variant="outline"
          onClick={() => setSelectedColor('color-red-500')}
        >
          Set Red
        </Button>

        <Button
          variant="outline"
          onClick={() => setSelectedColor('color-green-500')}
        >
          Set Green
        </Button>
      </Horizontal>

      <Text fontSize="14px" color="color-gray-600">
        Selected color: {selectedColor}
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ColorPicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L13) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L15) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L17) |
| `placeholder` | `string` | `'Select a color'` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L19) |
| `helperText` | `string` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L21) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L23) |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L25) |
| `onChange` | `((color: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L27) |
| `onChangeComplete` | `((color: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L29) |
| `views` | `ColorPickerStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L31) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L33) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L35) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L37) |
| `error` | `boolean` | `false` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L39) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L41) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L43) |
| `predefinedColors` | `PredefinedColor[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L45) |
| `showCustomInput` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L47) |
| `showRecentColors` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L49) |
| `colorFormat` | `ColorFormat` `"hex"``"rgb"``"hsl"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L51) |
| `maxRecentColors` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L53) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L55) |
| `onOpen` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L57) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L59) |
| `closeOnSelect` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L61) |
| `aria-label` | `string` | `—` | Defines a string value that labels the current element.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L63) |
| `aria-describedby` | `string` | `—` | Identifies the element (or elements) that describes the object.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ColorPicker/ColorPicker/ColorPicker.props.ts#L65) |

Common inherited styling props (7)

**ColorPicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ComboBox

@app-studio/components

# ComboBox

A customizable dropdown list with optional search functionality.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox.tsx)

## Import

```ts
import { ComboBox } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { ComboBox } from '@app-studio/components';

export const DefaultDemo = () => {
  const items = [
    {
      value: 'next.js',
      label: 'Next.js',
    },
    {
      value: 'sveltekit',
      label: 'SvelteKit',
    },
    {
      value: 'nuxt.js',
      label: 'Nuxt.js',
    },
  ];
  return <ComboBox id="default" name="default" items={items} />;
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ComboBox**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Height of the trigger, on the shared field scale: `xs` 24, `sm` 32, `md` 40, `lg` 48, `xl` 56. `InputProps['size']` is omitted above because that is the numeric HTML attribute, not a design-system size.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L13) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L15) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L17) |
| `items` Required | `ComboBoxItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L19) |
| `onSelect` | `((item: ComboBoxItem \| ComboBoxItem[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L21) |
| `searchEnabled` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L23) |
| `left` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L25) |
| `right` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L27) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L29) |
| `showTick` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L31) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L33) |
| `views` | `ComboBoxStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L35) |
| `searchPlaceholder` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L37) |
| `isMulti` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ComboBox/ComboBox/ComboBox.props.ts#L39) |

Common inherited styling props (7)

**ComboBox inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/CountryPicker

@app-studio/components

# CountryPicker

Enables users to select a country from a dropdown list with various styling options.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker.tsx)

## Import

```ts
import { CountryPicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { CountryPicker } from '@app-studio/components';

export const DefaultCountryPicker = () => <CountryPicker label="Country" />;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**CountryPicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L14) |
| `error` | `boolean` | `—` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L16) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L18) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L20) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L22) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L24) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L26) |
| `isAutoFocus` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L28) |
| `isReadOnly` | `boolean` | `—` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L30) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L32) |
| `onBlur` | `((event: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L34) |
| `onChange` | `((value: string) => void)` | `—` | Called with the country name the field now holds — either the option that was picked or what the user has typed so far. Never the DOM event, so `e.target.value` is a compile error.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L40) |
| `views` | `CountryPickerStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L42) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L44) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L46) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L48) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/CountryPicker/CountryPicker/CountryPicker.props.ts#L50) |

Common inherited styling props (7)

**CountryPicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/DatePicker

@app-studio/components

# DatePicker

A customizable date selection input for user interfaces.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker.tsx)

## Import

```ts
import { DatePicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { DatePicker } from '@app-studio/components';

export const DefaultDatePicker = () => <DatePicker label="Select a date" />;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DatePicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L10) |
| `error` | `boolean` | `false` | Indicates whether the DatePicker has an error.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L14) |
| `helperText` | `string` | `—` | Additional helper text that provides information about the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L18) |
| `name` | `string` | `—` | The name of the toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L22) |
| `isReadOnly` | `boolean` | `false` | If true, the DatePicker cannot be selected.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L30) |
| `isDisabled` | `boolean` | `false` | If true, the DatePicker will be unusable.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L34) |
| `label` | `string` | `—` | The label text for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L39) |
| `onChange` | `((value: string) => void)` | `—` | Called with the date string the field now holds (`yyyy-mm-dd`) — never the DOM event, so `e.target.value` is a compile error. Typed rather than `any` so a DOM-shaped handler fails to build instead of failing silently.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L45) |
| `onChangeText` | `((text: string) => void)` | `—` | Callback function triggered when the DatePicker value changes for IOS and Android.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L49) |
| `views` | `DatePickerStyles` | `{ container: {}, label: {}, helperText: {}, text: {}, field: {} }` | CSS styles for the DatePicker container and label.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L53) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | The shape that changes the outlines of the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L57) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Changes the style of the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L61) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | The size that sets the height and width of the DatePicker.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L65) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Adds a shadow effect to the DatePicker.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/DatePicker/DatePicker/DatePicker.props.ts#L69) |

Common inherited styling props (7)

**DatePicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/EmojiPicker

@app-studio/components

# EmojiPicker

A user-friendly tool for selecting and inserting emojis into text inputs or forms.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker.tsx)

## Import

```ts
import { EmojiPicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Vertical, Horizontal } from 'app-studio';
import { EmojiPicker } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';

export const ControlledEmojiPicker = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedEmoji, setSelectedEmoji] = useState('🎉');

  return (
    <Vertical gap={16}>
      <Text fontWeight="bold">Controlled EmojiPicker</Text>

      <EmojiPicker
        label="Controlled Emoji Picker"
        value={selectedEmoji}
        isOpen={isOpen}
        onChange={setSelectedEmoji}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        closeOnSelect={false}
        placeholder="Controlled picker"
      />

      <Horizontal gap={8}>
        <Button variant="outline" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? 'Close' : 'Open'} Picker
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('😀')}>
          Set Happy
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('❤️')}>
          Set Heart
        </Button>

        <Button variant="outline" onClick={() => setSelectedEmoji('🚀')}>
          Set Rocket
        </Button>
      </Horizontal>

      <Text fontSize="14px" color="color-gray-600">
        Selected emoji: {selectedEmoji}
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**EmojiPicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"picker" \| "reaction"` `"picker"``"reaction"` | `'picker'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L12) |
| `trigger` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L13) |
| `quickEmojis` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L14) |
| `selectedEmojis` | `string[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L15) |
| `labels` | View type `Partial<{ select: string; reaction: string; search: string; more: string; empty: string; categoryEmpty: string; recent: string; smileys: string; people: string; animals: string; food: string; activities: string; travel: string; objects: string; symbols: string; flags: string; }>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L16) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L18) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L20) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L22) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L24) |
| `helperText` | `string` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L26) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L28) |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L30) |
| `onChange` | `((emoji: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L32) |
| `onEmojiSelect` | `((emoji: Emoji) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L34) |
| `views` | `EmojiPickerStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L36) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L38) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L40) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L42) |
| `error` | `boolean` | `false` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L44) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L46) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L48) |
| `showSearch` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L50) |
| `showCategories` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L52) |
| `showRecentEmojis` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L54) |
| `maxRecentEmojis` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L56) |
| `enabledCategories` | `EmojiCategory[]` | `[ 'recent', 'smileys', 'people', 'animals', 'food', 'activities', 'travel', 'objects', 'symbols', 'flags', ]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L58) |
| `customEmojis` | `Emoji[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L60) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L62) |
| `onOpen` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L64) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L66) |
| `closeOnSelect` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L68) |
| `aria-label` | `string` | `—` | Defines a string value that labels the current element.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L70) |
| `aria-describedby` | `string` | `—` | Identifies the element (or elements) that describes the object.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EmojiPicker/EmojiPicker/EmojiPicker.props.ts#L72) |

Common inherited styling props (7)

**EmojiPicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Formik

@app-studio/components

# Formik

Formik bindings for App Studio fields. Keep validation and submission in Formik while reusing the same labels, variants, and styling props.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Formik/Formik.TextField.tsx)

## Import

```ts
import { FormikForm, FormikTextField, FormikCheckbox } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

Mount `FormikForm` inside Formik. Bind each field with `name`; the wrappers keep the props of their underlying controls. See the [forms guide](https://app-studio-6167b.web.app/docs/forms) for validation and submission.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Formik } from 'formik';
import { FormikForm, FormikTextField, FormikCheckbox } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function FormikExample() {
  const [message, setMessage] = useState('');
  return (
    <Formik
      initialValues={{ project: '', updates: true }}
      validate={(values) =>
        values.project.trim() ? {} : { project: 'Enter a project name.' }
      }
      onSubmit={(values, actions) => {
        setMessage(`Created: ${values.project}`);
        actions.setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => (
        <FormikForm>
          <Vertical gap={16} maxWidth={360}>
            <FormikTextField name="project" label="Project name" />
            <FormikCheckbox name="updates" label="Receive updates" />
            <Button type="submit" isLoading={isSubmitting}>
              Create project
            </Button>
            <Text role="status">
              {message || 'Complete the form to create a project.'}
            </Text>
          </Vertical>
        </FormikForm>
      )}
    </Formik>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**FormikTextField**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L12) |
| `error` | `any` | `—` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L14) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L16) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L18) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L20) |
| `left` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L22) |
| `right` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L24) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L26) |
| `isReadOnly` | `boolean` | `—` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L28) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L30) |
| `isClearable` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L32) |
| `isAutoFocus` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L34) |
| `isRequired` | `boolean` | `—` | Marks this field as required.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L36) |
| `required` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L38) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L40) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L42) |
| `labelProps` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L44) |
| `onChange` | `((value: string) => void)` | `—` | Called when the value changes, with the **value itself** — not the DOM event. TextField follows the value-first convention this package already exposes through `onChangeText`, so there is no `event.target` to read: onChange={(value) => setQuery(value)} // ✅ onChange={(e) => setQuery(e.target.value)} // ❌ compile error The parameter is deliberately typed `string` rather than `any`: a DOM-shaped handler is an API mistake, and typing it makes that mistake a compile error instead of an input that silently never updates. If you need the event, use `onChangeText` for the value and reach for the native `<input>` through `inputRef`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L59) |
| `onChangeText` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L61) |
| `onBlur` | `((event: any) => void)` | `—` | Called when the field loses focus, with the blur **event** (not the value). Clearing the field via the clear button synthesises a minimal `{ target: { name } }` so form libraries can mark the field touched.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L67) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L69) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L71) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L73) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L75) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L77) |
| `views` | `TextFieldStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L79) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L81) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L83) |
| `isMultiline` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L85) |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L87) |
| `inputRef` | `((node: { focus: () => void; } \| null) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L92) |

Common inherited styling props (6)

**FormikTextField inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/OTPInput

@app-studio/components

# OTP Input

A component to securely input one-time passwords or verification codes digit by digit.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput.tsx)

## Import

```ts
import { OTPInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Button } from '@app-studio/components';
import { Vertical, View } from 'app-studio';
import { Text } from 'app-studio';
import { OTPInput } from '@app-studio/components';

export const DefaultOTPInput = () => {
  const [otp, setOtp] = useState('');

  const handleSubmit = () => {
    if (typeof alert !== 'undefined') {
      alert(`Entered OTP: ${otp}`);
    } else {
      console.log(`Entered OTP: ${otp}`);
    }
  };

  return (
    <View>
      <Vertical gap={20}>
        <Text>Enter verification code:</Text>
        <OTPInput name="otp" value={otp} onChange={setOtp} isAutoFocus />
        <Button type="button" isAuto onClick={handleSubmit}>
          Verify
        </Button>
      </Vertical>
    </View>
  );
};

export const CustomizedOTPInput = () => {
  const [otp, setOtp] = useState('');

  return (
    <Vertical gap={20}>
      <Text>Custom OTP Input:</Text>
      <OTPInput
        name="customOtp"
        value={otp}
        onChange={setOtp}
        length={4}
        shape="pill"
        variant="outline"
        size="lg"
        gap={12}
        shadow={{ boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 6px' }}
        views={{
          container: {
            borderColor: 'theme-primary',
            backgroundColor: 'color-gray-50',
          },
          input: {
            color: 'theme-primary',
            fontWeight: 'bold',
          },
        }}
      />
    </Vertical>
  );
};

export const OTPInputWithLabel = () => {
  const [otp, setOtp] = useState('');

  return (
    <Vertical gap={20}>
      <OTPInput
        name="labeledOtp"
        label="Verification Code"
        helperText="Enter the 6-digit code sent to your phone"
        value={otp}
        onChange={setOtp}
      />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**OTPInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L9) |
| `error` | `any` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L11) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L13) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L15) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L17) |
| `length` | `number` | `6` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L19) |
| `placeholder` | `string` | `''` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L21) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L23) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L25) |
| `isAutoFocus` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L27) |
| `type` | `OTPInputType` `"number"``"text"``"password"` | `'text'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L29) |
| `onComplete` | `((value: string) => void)` | `—` | Called when the input is complete.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L31) |
| `onChange` | `((value: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L33) |
| `onChangeText` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L35) |
| `onBlur` | `((event: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L38) |
| `onKeyPress` | `((e: React.KeyboardEvent<HTMLInputElement>) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L40) |
| `onKeyDown` | `((e: React.KeyboardEvent<HTMLInputElement>) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L42) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L44) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L46) |
| `pattern` | `string \| RegExp` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L48) |
| `pasteTransformer` | `((pasted: string) => string)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L50) |
| `stepValues` | `number[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L52) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L54) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L56) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'rounded'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L58) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'outline'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L60) |
| `gap` | `number` | `8` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017. **Syntax**: `<'row-gap'> <'column-gap'>?` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :------: \| :----: \| :-: \| \| **57** \| **52** \| **10.1** \| **16** \| No \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L62) |
| `views` | `OTPInputStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L64) |
| `secureTextEntry` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/OTPInput/OTPInput/OTPInput.props.ts#L66) |

Common inherited styling props (6)

**OTPInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Password

@app-studio/components

# Password

A password field with a visibility toggle. Connect its value and change callback, then reuse the labels, validation, and styling props of TextField.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Password/Password.tsx)

## Import

```ts
import { Password } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Password } from '@app-studio/components';

export function PasswordExample() {
  const [password, setPassword] = useState('example-password');
  return <Password label="Password" value={password} onChange={setPassword} />;
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Password**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | `—` | The name of the input field[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Password/Password/Password.props.ts#L15) |
| `isDisabled` | `boolean` | `—` | If true, the Input will be unusable[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Password/Password/Password.props.ts#L19) |
| `visibleIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon to Indicate that the password is visible[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Password/Password/Password.props.ts#L23) |
| `hiddenIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon to Indicate that the password is hidden[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Password/Password/Password.props.ts#L27) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L12) |
| `error` | `any` | `—` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L14) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L16) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L20) |
| `left` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L22) |
| `right` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L24) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L26) |
| `isReadOnly` | `boolean` | `—` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L28) |
| `isClearable` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L32) |
| `isAutoFocus` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L34) |
| `isRequired` | `boolean` | `—` | Marks this field as required.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L36) |
| `required` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L38) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L40) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L42) |
| `labelProps` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L44) |
| `onChange` | `((value: string) => void)` | `—` | Called when the value changes, with the **value itself** — not the DOM event. TextField follows the value-first convention this package already exposes through `onChangeText`, so there is no `event.target` to read: onChange={(value) => setQuery(value)} // ✅ onChange={(e) => setQuery(e.target.value)} // ❌ compile error The parameter is deliberately typed `string` rather than `any`: a DOM-shaped handler is an API mistake, and typing it makes that mistake a compile error instead of an input that silently never updates. If you need the event, use `onChangeText` for the value and reach for the native `<input>` through `inputRef`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L59) |
| `onChangeText` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L61) |
| `onBlur` | `((event: any) => void)` | `—` | Called when the field loses focus, with the blur **event** (not the value). Clearing the field via the clear button synthesises a minimal `{ target: { name } }` so form libraries can mark the field touched.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L67) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L69) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L71) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L73) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L75) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L77) |
| `views` | `TextFieldStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L79) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L81) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L83) |
| `isMultiline` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L85) |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L87) |
| `inputRef` | `((node: { focus: () => void; } \| null) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L92) |

Common inherited styling props (6)

**Password inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Select

@app-studio/components

# Select

A customizable UI component for selecting from a list of options.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select.tsx)

## Import

```ts
import { Select } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Horizontal } from 'app-studio';
import { Button } from '@app-studio/components';
import { Select } from '@app-studio/components';

const options = [
  { label: 'Item1', value: '1' },
  { label: 'Item2', value: '2' },
  { label: 'Item3', value: '3' },
];

export const ControlledSelect = () => {
  const [value, setValue] = useState('2');

  return (
    <Horizontal gap={12} alignItems="center">
      <Select
        options={options}
        label="Select an item"
        value={value}
        // `onChange` hands back the next selection — a string here, and the
        // whole array when `isMulti`. Never a DOM event, so there is no
        // `e.target.value` to read.
        onChange={(next: string) => setValue(next)}
      />
      {/* The selection follows the state, whoever moved it. */}
      <Button onClick={() => setValue('3')}>Jump to Item3</Button>
    </Horizontal>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Select**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L14) |
| `error` | `boolean` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L16) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L18) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L20) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L22) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L24) |
| `options` Required | `Option[]` | `[]` | Available choices and their values.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L26) |
| `value` | `string \| string[]` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L31) |
| `defaultValue` | `string \| string[]` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L34) |
| `isMulti` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L36) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L38) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L40) |
| `isRequired` | `boolean` | `false` | Marks this field as required.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L42) |
| `isAutoFocus` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L44) |
| `onChange` | `((value: string \| string[]) => void)` | `—` | Called with the next selection whenever it changes: the chosen option's value for a single select, the full array of selected values when `isMulti`. It has to be the *next* selection rather than the option that was just touched, otherwise a controlled parent has nothing to store. It is always the **value**, never the DOM event — `e.target.value` is a compile error. The parameter is typed rather than left `any` so a DOM-shaped handler fails to build instead of failing silently at runtime. Declared with method syntax on purpose. Method parameters are compared bivariantly, so a single-select caller can still pass a plain `(value: string) => void` (arrays only ever occur when `isMulti`) while a `(e: ChangeEvent) => void` stays rejected — an event is unrelated to `string \| string[]` in both directions. Writing this as a property would force every single-select consumer to narrow a union that their Select can never produce.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L63) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L65) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L67) |
| `views` | `SelectStyles` | `{ text: {}, icon: {}, dropDown: {}, selectBox: {}, label: {}, helperText: {}, }` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L69) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L71) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L73) |
| `isScrollable` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Select/Select/Select.props.ts#L75) |

Common inherited styling props (7)

**Select inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Selector

@app-studio/components

# Selector

A segmented control UI component for selecting from a limited list of options, typically used for toggling states or selecting mutually exclusive options like complexity or priority.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector.tsx)

## Import

```ts
import { Selector } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Text, Vertical } from 'app-studio';
import { Selector } from '@app-studio/components';

export const ControlledSelector = () => {
  const [value, setValue] = useState('weekly');
  return (
    <Vertical gap={8}>
      <Selector
        label="Frequency"
        options={[
          { label: 'Daily', value: 'daily' },
          { label: 'Weekly', value: 'weekly' },
          { label: 'Monthly', value: 'monthly' },
        ]}
        onChange={(next: string) => setValue(next)}
      />
      <Text color="color-gray-500" fontSize="12px">
        Selected: {value}
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Selector**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L7) |
| `error` | `boolean` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L9) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L11) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L13) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L15) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L17) |
| `options` Required | `Option[]` | `[]` | Available choices and their values.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L19) |
| `isMulti` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L21) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L23) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L25) |
| `onChange` | `((value: string) => void)` | `—` | Called with the selected option's `value` — never the DOM event, so `e.target.value` is a compile error. Typed rather than `any` so a DOM-shaped handler fails to build instead of failing silently.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L31) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L33) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L35) |
| `views` | `SelectorStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L37) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L39) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L41) |
| `isScrollable` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Selector/Selector/Selector.props.ts#L43) |

Common inherited styling props (7)

**Selector inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Slider

@app-studio/components

# Slider

The Slider component allows users to select a single value from a predefined range by dragging a thumb.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider.tsx)

## Import

```ts
import { Slider } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Slider } from '@app-studio/components';
import { Text } from 'app-studio';
import { Button } from '@app-studio/components';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';

export const ControlledDemo = () => {
  const [volume, setVolume] = useState(75);

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text>Controlled Slider (Value: {volume})</Text>
      <Slider
        value={volume}
        onChange={setVolume}
        min={0}
        max={100}
        step={1}
        ariaLabel="Controlled volume"
        showTooltip
      />
      <Horizontal gap={10}>
        <Button onClick={() => setVolume(0)}>Mute</Button>
        <Button onClick={() => setVolume(50)}>50%</Button>
        <Button onClick={() => setVolume(100)}>Max</Button>
      </Horizontal>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Slider**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `min` | `number` | `—` | Minimum allowed value.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L9) |
| `max` | `number` | `—` | Maximum allowed value.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L11) |
| `value` | `number` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L13) |
| `defaultValue` | `number` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L15) |
| `step` | `number` | `—` | Increment between allowed values.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L17) |
| `stepValues` | `number[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L19) |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L21) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L23) |
| `variant` | `Variant` `"outline"``"default"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L25) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L27) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L29) |
| `showValue` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L31) |
| `showTooltip` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L33) |
| `label` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L35) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L37) |
| `onChange` | `((value: number) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L39) |
| `onDrag` | `((value: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L41) |
| `views` | `SliderStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L43) |
| `shadow` | `ViewProps` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L45) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Slider/Slider/Slider.props.ts#L47) |

Common inherited styling props (7)

**Slider inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Switch

@app-studio/components

# Switch

A toggle switch for user interactions like turning settings on or off.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch.tsx)

## Import

```ts
import { Switch } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Switch } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function SwitchExample() {
  const [enabled, setEnabled] = useState(true);
  return (
    <Vertical gap={12}>
      <Switch
        label="Enable notifications"
        isChecked={enabled}
        onChange={setEnabled}
      />
      <Text role="status">Notifications {enabled ? 'on' : 'off'}.</Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Switch**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `activeChild` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L8) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L10) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L12) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L14) |
| `isChecked` | `boolean` | `—` | Current checked state. Update it from the onChange callback to keep the control controlled.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L16) |
| `onChange` | `((checked: boolean) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L18) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L20) |
| `inActiveChild` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L22) |
| `views` | `SwitchStyles` | `{ slider: {}, circle: {}, label: {} }` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L24) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L26) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'sm'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L28) |
| `labelPosition` | `"left" \| "right"` `"left"``"right"` | `'right'` | Position of the visible label relative to the control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L30) |
| `label` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L32) |
| `description` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Secondary text describing the control or its current state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Switch/Switch/Switch.props.ts#L34) |

Common inherited styling props (7)

**Switch inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/TagInput

@app-studio/components

# TagInput

A form input component for managing a list of tags. Users can add tags by typing and pressing Enter or comma, and remove them by clicking the X button or using backspace.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput.tsx)

## Import

```ts
import { TagInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Vertical, Text } from 'app-studio';
import { TagInput } from '@app-studio/components';

/**
 * Default TagInput example
 */
export const DefaultTagInput = () => {
  const [tags, setTags] = useState<string[]>([]);

  return (
    <Vertical gap={20}>
      <Text>Default Tag Input:</Text>
      <TagInput
        // name="tags"
        label="Tags"
        placeholder="Type tags and press Enter..."
        tags={tags}
        onTagsChange={setTags}
        helperText="Add relevant tags for your content"
      />
      <Text fontSize={14} color="color-gray-600">
        Current tags: {Array.isArray(tags) ? tags.join(', ') : 'None'}
      </Text>
    </Vertical>
  );
};

/**
 * TagInput with custom separators
 */
export const CustomSeparatorsTagInput = () => {
  const [tags, setTags] = useState<string[]>(['react', 'typescript']);

  return (
    <Vertical gap={20}>
      <Text>Custom Separators (Enter, Comma, Space):</Text>
      <TagInput
        name="customTags"
        label="Skills"
        placeholder="Use Enter, comma, or space to add skills..."
        tags={tags}
        onTagsChange={setTags}
        separators={['enter', 'comma', 'space']}
        variant="outline"
        shape="rounded"
        size="lg"
      />
    </Vertical>
  );
};

/**
 * TagInput with maximum limit
 */
export const LimitedTagInput = () => {
  const [tags, setTags] = useState<string[]>(['javascript', 'web']);

  return (
    <Vertical gap={20}>
      <Text>Limited to 5 tags:</Text>
      <TagInput
        name="limitedTags"
        label="Technologies"
        placeholder="Add up to 5 technologies..."
        tags={tags}
        onTagsChange={setTags}
        maxTags={5}
        variant="outline"
        helperText={`${tags.length}/5 tags used`}
      />
    </Vertical>
  );
};

/**
 * TagInput with validation
 */
export const ValidatedTagInput = () => {
  const [tags, setTags] = useState<string[]>([]);

  return (
    <Vertical gap={20}>
      <Text>With Validation (3-20 chars, no duplicates):</Text>
      <TagInput
        name="validatedTags"
        label="Categories"
        placeholder="Add categories..."
        tags={tags}
        onTagsChange={setTags}
        minTagLength={3}
        maxTagLength={20}
        allowDuplicates={false}
        variant="outline"
        shape="pill"
        helperText="Tags must be 3-20 characters long"
      />
    </Vertical>
  );
};

/**
 * Disabled and ReadOnly states
 */
export const DisabledTagInput = () => {
  return (
    <Vertical gap={20}>
      <Text>Disabled State:</Text>
      <TagInput
        name="disabledTags"
        label="Disabled Tags"
        tags={['disabled', 'example']}
        isDisabled={true}
        helperText="This input is disabled"
      />

      <Text>Read-Only State:</Text>
      <TagInput
        name="readonlyTags"
        label="Read-Only Tags"
        tags={['readonly', 'example']}
        isReadOnly={true}
        isRemovable={false}
        helperText="This input is read-only"
      />
    </Vertical>
  );
};

/**
 * Custom styled TagInput
 */
export const StyledTagInput = () => {
  const [tags, setTags] = useState<string[]>(['design', 'ui']);

  return (
    <Vertical gap={20}>
      <Text>Custom Styled:</Text>
      <TagInput
        name="styledTags"
        label="Design Tags"
        placeholder="Add design-related tags..."
        tags={tags}
        onTagsChange={setTags}
        variant="none"
        shape="rounded"
        shadow={{ boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px' }}
        views={{
          inputContainer: {
            borderColor: 'theme-primary',
            borderWidth: '2px',
            backgroundColor: 'color-blue-50',
          },
          tag: {
            backgroundColor: 'theme-primary',
            borderColor: 'theme-primary',
          },
          tagText: {
            color: 'color-white',
          },
          tagRemove: {
            _hover: {
              backgroundColor: 'rgba(255, 255, 255, 0.2)',
            },
          },
          label: {
            color: 'theme-primary',
            fontWeight: 'bold',
          },
        }}
      />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**TagInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L19) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L21) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L23) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L25) |
| `error` | `string \| boolean` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L27) |
| `placeholder` | `string` | `'Type and press Enter to add tags...'` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L29) |
| `tags` | `string[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L31) |
| `defaultTags` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L33) |
| `onTagsChange` | `((tags: string[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L35) |
| `onTagAdd` | `((tag: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L37) |
| `onTagRemove` | `((tag: string, index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L39) |
| `maxTags` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L41) |
| `minTagLength` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L43) |
| `maxTagLength` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L45) |
| `allowDuplicates` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L47) |
| `separators` | `TagSeparator[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L49) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L51) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L53) |
| `isAutoFocus` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L55) |
| `isRemovable` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L57) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L59) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L61) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L63) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L65) |
| `views` | `TagInputStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L67) |
| `left` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L69) |
| `right` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L71) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L73) |
| `onBlur` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L75) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L77) |
| `menuItems` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L79) |
| `onMenuItemSelect` | `((item: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TagInput/TagInput/TagInput.props.ts#L81) |

Common inherited styling props (6)

**TagInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/TextArea

@app-studio/components

# TextArea

A text input field for multi-line text editing with customizable features.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea.tsx)

## Import

```ts
import { TextArea } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';

import { TextArea } from '@app-studio/components';

export const DefaultArea = () => (
  <TextArea name="comments" placeholder="Enter your thoughts" />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**TextArea**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L13) |
| `error` | `boolean` | `—` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L14) |
| `isEditable` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L17) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L18) |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L19) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L20) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L21) |
| `isAutoFocus` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L22) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L23) |
| `maxRows` | `number` | `3` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L24) |
| `maxCols` | `number` | `30` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L25) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L26) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L27) |
| `onChange` | `((value: string) => void)` | `—` | Called when the value changes, with the **value itself** — not the DOM event. TextArea follows the value-first convention this package already exposes through `onChangeText`, so there is no `event.target` to read: onChange={(value) => setBody(value)} // ✅ onChange={(e) => setBody(e.target.value)} // ❌ compile error The parameter is deliberately typed `string` rather than `any`: a DOM-shaped handler is an API mistake, and typing it makes that mistake a compile error instead of a field that silently never updates.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L40) |
| `onChangeText` | `((text: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L41) |
| `onBlur` | `((event: any) => void)` | `—` | Called when the field loses focus, with the blur **event** (not the value).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L46) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L47) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'sm'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L48) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L49) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L50) |
| `views` | `TextAreaStyles` | `{ label: {}, helperText: {} }` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L51) |
| `value` | `string \| number` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L52) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L53) |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L54) |
| `cols` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L55) |
| `isRequired` | `boolean` | `—` | Marks this field as required.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L56) |
| `required` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L57) |
| `labelProps` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L58) |
| `inputRef` | `((node: { focus: () => void; } \| null) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextArea/TextArea/TextArea.props.ts#L62) |

Common inherited styling props (7)

**TextArea inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/TextField

@app-studio/components

# TextField

A customizable text input field with optional helpers, labels, and icons.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField.tsx)

## Import

```ts
import { TextField } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { TextField } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function TextFieldExample() {
  const [name, setName] = useState('App Studio');
  return (
    <Vertical gap={12} width="100%" maxWidth={360}>
      <TextField
        label="Project name"
        placeholder="Name your project"
        value={name}
        onChange={setName}
        isClearable
      />
      <Text role="status">
        {name ? `Project: ${name}` : 'Enter a project name.'}
      </Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**TextField**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L12) |
| `error` | `any` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L14) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L16) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L18) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L20) |
| `left` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L22) |
| `right` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L24) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L26) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L28) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L30) |
| `isClearable` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L32) |
| `isAutoFocus` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L34) |
| `isRequired` | `boolean` | `—` | Marks this field as required.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L36) |
| `required` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L38) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L40) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L42) |
| `labelProps` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L44) |
| `onChange` | `((value: string) => void)` | `—` | Called when the value changes, with the **value itself** — not the DOM event. TextField follows the value-first convention this package already exposes through `onChangeText`, so there is no `event.target` to read: onChange={(value) => setQuery(value)} // ✅ onChange={(e) => setQuery(e.target.value)} // ❌ compile error The parameter is deliberately typed `string` rather than `any`: a DOM-shaped handler is an API mistake, and typing it makes that mistake a compile error instead of an input that silently never updates. If you need the event, use `onChangeText` for the value and reach for the native `<input>` through `inputRef`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L59) |
| `onChangeText` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L61) |
| `onBlur` | `((event: any) => void)` | `—` | Called when the field loses focus, with the blur **event** (not the value). Clearing the field via the clear button synthesises a minimal `{ target: { name } }` so form libraries can mark the field touched.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L67) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L69) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L71) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L73) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `{}` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L75) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L77) |
| `views` | `TextFieldStyles` | `{ container: {}, field: {}, label: {}, helperText: {}, text: {} }` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L79) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L81) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L83) |
| `isMultiline` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L85) |
| `rows` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L87) |
| `inputRef` | `((node: { focus: () => void; } \| null) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/TextField/TextField/TextField.props.ts#L92) |

Common inherited styling props (6)

**TextField inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Toggle

@app-studio/components

# Toggle

A versatile control allowing users to switch between two states, enabling or disabling features.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle.tsx)

## Import

```ts
import { Toggle } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Toggle } from '@app-studio/components';

export const DefaultDemo = () => {
  return <Toggle>Default</Toggle>;
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Toggle**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `'rounded'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L5) |
| `isToggled` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L7) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L9) |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L11) |
| `variant` | `Variant` `"outline"``"link"``"ghost"` | `'ghost'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L13) |
| `onToggle` | `((isToggled: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L15) |
| `views` | `any` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toggle/Toggle/Toggle.props.ts#L17) |

Common inherited styling props (7)

**Toggle inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ToggleGroup

@app-studio/components

# ToggleGroup

A group of toggle buttons allowing users to select one or more options.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup.tsx)

## Import

```ts
import { ToggleGroup } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { ToggleGroup } from '@app-studio/components';

export const DefaultDemo = () => {
  const items = [
    { id: 'B', value: 'B' },
    { id: 'C', value: 'C' },
    { id: 'D', value: 'D' },
  ];
  return <ToggleGroup items={items} />;
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ToggleGroup**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup/ToggleGroup.props.ts#L7) |
| `items` Required | `ToggleItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup/ToggleGroup.props.ts#L9) |
| `variant` | `Variant` `"outline"``"link"``"ghost"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup/ToggleGroup.props.ts#L11) |
| `onToggleChange` | `((activeIds: string[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup/ToggleGroup.props.ts#L13) |
| `views` | `any` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ToggleGroup/ToggleGroup/ToggleGroup.props.ts#L15) |

Common inherited styling props (7)

**ToggleGroup inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Uploader

@app-studio/components

# Upload

A versatile file upload component with support for images, videos, and files, featuring drag-and-drop, preview, progress tracking, and validation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader.tsx)

## Import

```ts
import { Uploader } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Uploader } from '@app-studio/components';

export const DefaultUploader = () => (
  <Vertical gap={12} width="100%">
    <Uploader
      text="Tap to choose a file"
      onFileSelect={(file) => console.log('selected', file?.name)}
    />
  </Vertical>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Uploader**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `accept` | `string` | `'*/*'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L6) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L8) |
| `onFileSelect` | `((file: File) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L10) |
| `onMultipleFileSelect` | `((files: File[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L12) |
| `validateFile` | `((file: File) => string \| null)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L14) |
| `onError` | `((error: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L16) |
| `thumbnail` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L18) |
| `multiple` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L20) |
| `containerProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L40) |
| `errorMessageProps` | `TextProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L42) |
| `progressProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L44) |
| `videoProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L46) |
| `imageProps` | `ImageProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L48) |
| `iconProps` | `IconProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L50) |
| `textProps` | `TextProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L52) |
| `renderVideo` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L54) |
| `renderText` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L56) |
| `renderImage` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L58) |
| `renderError` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L60) |
| `renderFile` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L62) |
| `renderProgress` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L64) |
| `previewUrl` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L66) |
| `thumbnailUrl` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L68) |
| `errorMessage` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L70) |
| `isLoading` | `boolean` | `false` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L72) |
| `icon` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L74) |
| `text` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L78) |
| `progress` | `number` | `0` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L82) |
| `fileType` | `"video" \| "image" \| "file"` `"video"``"image"``"file"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L84) |
| `handleClick` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L86) |
| `views` | `{ container?: ViewProps; view?: ViewProps; image?: ImageProps; horizontal?: ViewProps; text?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L96) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Accordion

@app-studio/components

# Accordion

Organizes content into collapsible sections for efficient space management.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion.tsx)

## Import

```ts
import { Accordion } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Accordion } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export const DefaultAccordion = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={600}>
      <Text marginBottom={10}>Default Accordion (Single)</Text>
      <Accordion type="single" defaultValue="item-1">
        <Accordion.Item value="item-1">
          <Accordion.Trigger>
            <Text fontWeight="bold">What is React?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              React is a JavaScript library for building user interfaces. It is
              maintained by Facebook and a community of individual developers
              and companies. React can be used as a base in the development of
              single-page or mobile applications.
            </Text>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="item-2">
          <Accordion.Trigger>
            <Text fontWeight="bold">What are React Hooks?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              Hooks are functions that let you hook into React state and
              lifecycle features from function components. Hooks dont work
              inside classes — they let you use React without classes.
            </Text>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="item-3">
          <Accordion.Trigger>
            <Text fontWeight="bold">What is JSX?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              JSX is a syntax extension for JavaScript. It was written to be
              used with React and looks a lot like HTML. Because JSX is
              JavaScript, you can use variables inside it.
            </Text>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Accordion**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L13) |
| `type` | `AccordionType` `"multiple"``"single"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L15) |
| `defaultValue` | `string \| string[]` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L17) |
| `value` | `string \| string[]` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L19) |
| `onValueChange` | `((value: string \| string[] \| undefined) => void)` | `—` | Called when the selected value changes.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L21) |
| `collapsible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L23) |
| `shape` | `Shape` `"square"``"rounded"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L25) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L27) |
| `views` | `AccordionStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L29) |

Common inherited styling props (7)

**Accordion inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Accordion.Item

**Accordion.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L34) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L36) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L38) |
| `views` | `{ item?: ViewProps; trigger?: ViewProps; content?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L40) |

### Accordion.Trigger

**Accordion.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L50) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L52) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L57) |
| `value` | `string \| (readonly string[] & string)` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/app-studio/dist/web/index.d.ts#L173) |
| `isExpanded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L76) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L77) |
| `triggerId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L78) |
| `contentId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L79) |

### Accordion.Content

**Accordion.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L62) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Accordion/Accordion/Accordion.props.ts#L64) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ContextMenu

@app-studio/components

# ContextMenu

A floating menu that appears upon user interaction, typically a right-click or long-press.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu.tsx)

## Import

```ts
import { ContextMenu } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { ContextMenu } from '@app-studio/components';
import { View } from 'app-studio';

export const CompoundContextMenu = () => {
  const handleSelect = (action: string) => {
    alert(`Action selected: ${action}`);
  };

  return (
    <View
      padding={10}
      height={200}
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <ContextMenu>
        <ContextMenu.Trigger>
          <View
            padding={8}
            backgroundColor="color-blue-100"
            color="color-blue-800"
            borderRadius="sm"
            cursor="context-menu"
          >
            Right-click here (Compound Pattern)
          </View>
        </ContextMenu.Trigger>
        <ContextMenu.Content>
          <ContextMenu.Item onSelect={() => handleSelect('Edit')}>
            Edit
          </ContextMenu.Item>
          <ContextMenu.Item onSelect={() => handleSelect('Duplicate')}>
            Duplicate
          </ContextMenu.Item>
          <ContextMenu.Separator />
          <ContextMenu.Item onSelect={() => handleSelect('Share')} isDisabled>
            Share... (Disabled)
          </ContextMenu.Item>
          <ContextMenu.Item onSelect={() => handleSelect('Delete')}>
            Delete
          </ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu>
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ContextMenu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L14) |
| `items` | `ContextMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L16) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L18) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L20) |
| `disableNativeContextMenu` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L22) |
| `onOpenChange` | `((isOpen: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L24) |
| `views` | `ContextMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L26) |

### ContextMenu.Trigger

**ContextMenu.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L32) |
| `disableNativeContextMenu` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L34) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L36) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L38) |
| `views` | `{ container?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L40) |

### ContextMenu.Content

**ContextMenu.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `ContextMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L49) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L51) |
| `position` | `{ x: number; y: number; }` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L53) |
| `side` | `Position` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L55) |
| `align` | `Alignment` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L57) |
| `views` | `{ menu?: ViewProps; content?: ViewProps; item?: ViewProps; divider?: ViewProps; separator?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L59) |

### ContextMenu.Item

**ContextMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `ContextMenuItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L79) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L81) |
| `onSelect` | `((event: React.MouseEvent<HTMLButtonElement>) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L83) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L85) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L87) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L89) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `animation` | `Animation` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `label` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L99) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` | `—` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `—` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `borderMovingDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `startIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `endIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

### ContextMenu.Divider

**ContextMenu.Divider**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ divider?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L100) |

### ContextMenu.Separator

**ContextMenu.Separator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ContextMenu/ContextMenu/ContextMenu.props.ts#L107) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/DropdownMenu

@app-studio/components

# DropdownMenu

A versatile component for displaying a list of interactive items in a popup, triggered by another element.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu.tsx)

## Import

```ts
import { DropdownMenu } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { DropdownMenu } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon, DownloadIcon, ShareIcon } from '@app-studio/components';

export const DefaultDropdownMenu = () => {
  const handleCopy = () => alert('Copy clicked');
  const handleEdit = () => alert('Edit clicked');
  const handleDelete = () => alert('Delete clicked');
  const handleDownload = () => alert('Download clicked');
  const handleShare = () => alert('Share clicked');

  const items: any[] = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: handleCopy,
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: handleEdit,
    },
    {
      id: 'divider-1',
      divider: true,
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: handleDelete,
    },
    {
      id: 'more',
      label: 'More Options',
      items: [
        {
          id: 'download',
          label: 'Download',
          icon: <DownloadIcon widthHeight={16} />,
          onClick: handleDownload,
        },
        {
          id: 'share',
          label: 'Share',
          icon: <ShareIcon widthHeight={16} />,
          onClick: handleShare,
        },
      ],
    },
    {
      id: 'disabled',
      label: 'Disabled Option',
      disabled: true,
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>Default Dropdown Menu</Text>
      <DropdownMenu trigger={<Button>Open Menu</Button>} items={items} />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DropdownMenu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L13) |
| `items` Required | `DropdownMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L17) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L19) |
| `side` | `Position` `"bottom"``"left"``"right"``"top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L21) |
| `align` | `Alignment` `"start"``"center"``"end"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L23) |
| `defaultOpen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L24) |
| `views` | `DropdownMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L26) |

### DropdownMenu.Trigger

**DropdownMenu.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L32) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L34) |

### DropdownMenu.Content

**DropdownMenu.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `DropdownMenuItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L41) |
| `side` | `Position` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L43) |
| `align` | `Alignment` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L45) |
| `views` | `{ menu?: ViewProps; item?: ViewProps; divider?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L47) |

### DropdownMenu.Item

**DropdownMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` Required | `DropdownMenuItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L62) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; submenuIndicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L64) |

### DropdownMenu.Divider

**DropdownMenu.Divider**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ divider?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropdownMenu/DropdownMenu/DropdownMenu.props.ts#L75) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Link

@app-studio/components

# Link

This component provides a navigational link that can render children, manage external links, and apply various text decoration styles.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link.tsx)

## Import

```ts
import { Link } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';

import { Link } from '@app-studio/components';

export const DefaultLink = () => <Link to="/">Default</Link>;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Link**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L7) |
| `underline` | `TextDecorationStyle` `"hover"``"default"``"underline"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L9) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L11) |
| `iconSize` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L13) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L15) |
| `href` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L17) |
| `onClick` | `((event: React.MouseEvent) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L19) |
| `views` | `Styles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L21) |

Common inherited styling props (6)

**Link inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Menubar

@app-studio/components

# Menubar

A versatile component for structured navigation, displaying a list of interactive items and their sub-menus.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar.tsx)

## Import

```ts
import { Menubar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Menubar } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { EditIcon } from '@app-studio/components';

export const DefaultMenubar = () => {
  const items: any[] = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          icon: <EditIcon size={16} />,
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
        { separator: true },
        {
          id: 'save',
          label: 'Save',
          onClick: () => console.log('Save clicked'),
        },
        {
          id: 'save-as',
          label: 'Save As',
          onClick: () => console.log('Save As clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
        { separator: true },
        {
          id: 'cut',
          label: 'Cut',
          onClick: () => console.log('Cut clicked'),
        },
        {
          id: 'copy',
          label: 'Copy',
          onClick: () => console.log('Copy clicked'),
        },
        {
          id: 'paste',
          label: 'Paste',
          onClick: () => console.log('Paste clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
        { separator: true },
        {
          id: 'fullscreen',
          label: 'Fullscreen',
          onClick: () => console.log('Fullscreen clicked'),
        },
      ],
    },
    {
      id: 'help',
      label: 'Help',
      items: [
        {
          id: 'documentation',
          label: 'Documentation',
          onClick: () => console.log('Documentation clicked'),
        },
        {
          id: 'about',
          label: 'About',
          onClick: () => console.log('About clicked'),
        },
      ],
    },
  ];

  return (
    <View width="100%">
      <Text marginBottom={10}>Default Menubar</Text>
      <Menubar items={items} />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Menubar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `MenubarItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L13) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L15) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L17) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L19) |
| `defaultActiveMenuId` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L20) |
| `defaultOpenMenuId` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L21) |
| `views` | `MenubarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L23) |

### Menubar.Root

**Menubar.Root**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L30) |
| `orientation` | `Orientation` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L32) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L34) |
| `variant` | `Variant` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L36) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L38) |

### Menubar.Menu

**Menubar.Menu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L48) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L50) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L52) |
| `views` | `{ menu?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L54) |

### Menubar.Trigger

**Menubar.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L62) |
| `menuId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L64) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L66) |
| `views` | `{ trigger?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L68) |

### Menubar.Content

**Menubar.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L78) |
| `menuId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L80) |
| `views` | `{ content?: ViewProps; item?: ViewProps; icon?: ViewProps; separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L82) |

### Menubar.Item

**Menubar.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L96) |
| `id` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L98) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L100) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L102) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L104) |
| `views` | `{ item?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L106) |

### Menubar.Separator

**Menubar.Separator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `{ separator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Menubar/Menubar/Menubar.props.ts#L116) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/NavigationMenu

@app-studio/components

# NavigationMenu

A flexible navigation menu component that supports nested items, icons, and different orientations.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu.tsx)

## Import

```ts
import { NavigationMenu } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { NavigationMenu } from '@app-studio/components';
import { Text, Vertical, View } from 'app-studio';
import { HomeIcon, SettingsIcon, UserIcon, NotificationIcon, HelpIcon } from '@app-studio/components';

export const DefaultNavigationMenu = () => {
  const items = [
    {
      id: 'home',
      label: 'Home',
      icon: <HomeIcon widthHeight={20} />,
      href: '/home',
    },
    {
      id: 'settings',
      label: 'Settings',
      icon: <SettingsIcon widthHeight={20} />,
      items: [
        {
          id: 'profile',
          label: 'Profile',
          icon: <UserIcon widthHeight={20} />,
          href: '/profile',
        },
        {
          id: 'notifications',
          label: 'Notifications',
          icon: <NotificationIcon widthHeight={20} />,
          href: '/notifications',
        },
      ],
    },
    {
      id: 'help',
      label: 'Help',
      icon: <HelpIcon widthHeight={20} />,
      href: '/help',
    },
    {
      id: 'disabled',
      label: 'Disabled Item',
      disabled: true,
      href: '/disabled',
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={300}>
      <Text marginBottom={10}>Default Navigation Menu (Vertical)</Text>
      <View border="1px solid #e2e8f0" borderRadius={8} overflow="hidden">
        <NavigationMenu
          items={items}
          defaultActiveItemId="home"
          defaultExpandedItemIds={['settings']}
        />
      </View>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**NavigationMenu**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `NavigationItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L13) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L15) |
| `orientation` | `Orientation` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L17) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L19) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L21) |
| `defaultActiveItemId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L22) |
| `defaultExpandedItemIds` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L23) |
| `onItemActivate` | `((itemId: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L25) |
| `views` | `NavigationMenuStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L27) |

### NavigationMenu.List

**NavigationMenu.List**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L33) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L35) |

### NavigationMenu.Item

**NavigationMenu.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `NavigationItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L41) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L43) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L45) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L47) |
| `views` | `{ item?: ViewProps; trigger?: ViewProps; content?: ViewProps; icon?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L49) |

### NavigationMenu.Trigger

**NavigationMenu.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | `React.ReactNode \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>>` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L59) |
| `itemId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L61) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L63) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; trigger?: ViewProps; indicator?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L65) |

### NavigationMenu.Content

**NavigationMenu.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L74) |
| `itemId` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L76) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L78) |

### NavigationMenu.Link

**NavigationMenu.Link**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L84) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L86) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/NavigationMenu/NavigationMenu/NavigationMenu.props.ts#L88) |
| `onClick` | `((event: React.MouseEvent) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L19) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L11) |
| `underline` | `TextDecorationStyle` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L9) |
| `iconSize` | `Size` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Link/Link/Link.props.ts#L13) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Pagination

@app-studio/components

# Pagination

A pagination component for navigating through pages with customizable appearance, page size selection, and navigation controls.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination.tsx)

## Import

```ts
import { Pagination } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Pagination } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultPagination = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <View width="100%">
      <Text marginBottom={10}>Default Pagination</Text>
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Pagination**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `currentPage` Required | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L11) |
| `totalPages` Required | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L13) |
| `onPageChange` Required | `(page: number) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L15) |
| `pageSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L17) |
| `pageSizeOptions` | `PageSizeOption[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L19) |
| `onPageSizeChange` | `((pageSize: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L21) |
| `showPageSizeSelector` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L23) |
| `showPageInfo` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L25) |
| `maxPageButtons` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L27) |
| `showFirstLastButtons` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L29) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L31) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L33) |
| `shape` | `Shape` `"square"``"rounded"``"circular"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L35) |
| `views` | `PaginationStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L37) |
| `visiblePageNumbers` | `(string \| number)[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Pagination/Pagination/Pagination.props.ts#L39) |

Common inherited styling props (7)

**Pagination inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Tabs

@app-studio/components

# Tabs

A versatile component for organizing and displaying content in separate, selectable sections.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs.tsx)

## Import

```ts
import { Tabs } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { View, Text } from 'app-studio';
import { Button } from '@app-studio/components';
import { Tabs } from '@app-studio/components';

export const ControlledTabs = () => {
  const [activeTab, setActiveTab] = useState<string | number>('profile');

  const tabs = [
    {
      title: 'Profile',
      value: 'profile',
      content: (
        <View padding={20}>
          <Text fontWeight="600" marginBottom={12} fontSize={18}>
            Profile Settings
          </Text>
          <Text color="color-gray-600">
            Manage your public profile, bio, and avatar.
          </Text>
        </View>
      ),
    },
    {
      title: 'Account',
      value: 'account',
      content: (
        <View padding={20}>
          <Text fontWeight="600" marginBottom={12} fontSize={18}>
            Account Details
          </Text>
          <Text color="color-gray-600">
            Update your email, password, and security preferences.
          </Text>
        </View>
      ),
    },
    {
      title: 'Notifications',
      value: 'notifications',
      content: (
        <View padding={20}>
          <Text fontWeight="600" marginBottom={12} fontSize={18}>
            Notification Preferences
          </Text>
          <Text color="color-gray-600">
            Configure how and when you want to be notified.
          </Text>
        </View>
      ),
    },
  ];

  return (
    <View width="100%">
      <View
        marginBottom={20}
        padding={16}
        backgroundColor="color-blue-50"
        borderRadius={8}
        border="1px dashed"
        borderColor="color-blue-200"
      >
        <Text marginBottom={12}>
          Current Active Value: <Text fontWeight="bold">{activeTab}</Text>
        </Text>
        <View display="flex" flexDirection="row" gap={10}>
          <Button
            size="sm"
            variant={activeTab === 'profile' ? 'primary' : 'outline'}
            onClick={() => setActiveTab('profile')}
          >
            Select Profile
          </Button>
          <Button
            size="sm"
            variant={activeTab === 'account' ? 'primary' : 'outline'}
            onClick={() => setActiveTab('account')}
          >
            Select Account
          </Button>
          <Button
            size="sm"
            variant={activeTab === 'notifications' ? 'primary' : 'outline'}
            onClick={() => setActiveTab('notifications')}
          >
            Select Notifications
          </Button>
        </View>
      </View>

      <Tabs
        tabs={tabs}
        value={activeTab}
        onTabChange={(tab) => {
          console.log('Tab changed:', tab);
          if (tab.value) setActiveTab(tab.value);
        }}
      />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Tabs**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tabs` | `Tab[]` | `—` | Array of tab objects to be displayed. Each tab needs a unique `value`. (Data-driven approach)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L11) |
| `defaultValue` | `string \| number` | `—` | Optional value of the tab to be active initially. Defaults to the first tab if not provided or not found.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L13) |
| `onTabChange` | `((activeTab: Tab) => void)` | `—` | Optional callback function triggered when the active tab changes. Receives the newly active tab object.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L15) |
| `views` | `TabsStyles` | `—` | Optional styles object to customize the appearance of the tabs container, headers, text, and content area.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L17) |
| `variant` | `TabsVariant` `"pill"``"underline"``"segmented"` | `—` | Visual presentation style for the tab list.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L19) |
| `iconPosition` | `"bottom" \| "left" \| "right" \| "top"` `"bottom"``"left"``"right"``"top"` | `—` | Optional position of the icon relative to the text in tab headers.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L21) |
| `renderTab` | `((tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode)` | `—` | Optional custom renderer for a single tab header. Receives the tab data, whether it's currently active, and an onClick handler to activate the tab.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L26) |
| `renderContent` | `((activeTab: Tab) => React.ReactNode)` | `—` | Optional custom renderer for the content area. Receives the currently active tab object. If not provided, the `content` property from the active tab object will be rendered.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L36) |
| `keepMounted` | `boolean` | `—` | By default only the ACTIVE tab's content is mounted — inactive tabs do not exist in the DOM (their state resets on switch, and tests must activate a tab before asserting on its content). Set `keepMounted` to mount every tab's content up front and toggle visibility with `display: none`, preserving internal state across switches. Only applies to the data-driven `tabs` path; `renderContent` still receives the active tab only.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L47) |
| `value` | `string \| number` | `—` | Current value for controlled compound component pattern[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L50) |
| `onValueChange` | `((value: string \| number) => void)` | `—` | Callback when tab value changes in compound component pattern. Receives the tab's value — matching `Tabs.type.ts` and `Tabs.state.ts`, which already declared `string \| number` while this one said `any`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L56) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Children for compound component pattern[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L58) |

### Tabs.List

**Tabs.List**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Children (TabsTrigger components)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L93) |
| `views` | `{ container?: ViewProps; }` | `—` | Custom styles for the list container[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L95) |

### Tabs.Trigger

**Tabs.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Unique value for this tab[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L105) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Children content for the trigger[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L107) |
| `disabled` | `boolean` | `—` | Whether this trigger is disabled[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L109) |
| `views` | `{ trigger?: ViewProps; activeState?: ViewProps; }` | `—` | Custom styles for the trigger[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L111) |

### Tabs.Content

**Tabs.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Value that this content corresponds to[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L122) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Children content to display when this tab is active[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L124) |
| `views` | `{ content?: ViewProps; }` | `—` | Custom styles for the content[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tabs/Tabs/Tabs.props.ts#L126) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Markdown

@app-studio/components

# Markdown

`Markdown` affiche un document sur le web et React Native avec les primitives App Studio. Il partage le moteur de rendu de `BlockEditor`, sans ajouter de dépendance ni de surface d'édition.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown.tsx)

## Import

```ts
import { Markdown } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Markdown } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Vertical } from 'app-studio';

export function MarkdownExample() {
  const [expanded, setExpanded] = useState(false);
  return (
    <Vertical gap={16}>
      <Button variant="outline" onClick={() => setExpanded(!expanded)}>
        Toggle content
      </Button>
      <Markdown
        value={
          expanded
            ? '## Ready to build\n\nUse **components**, `tokens`, and your own state.\n\n- Install\n- Compose\n- Ship'
            : 'A **small** Markdown preview.'
        }
      />
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Markdown**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L14) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L15) |
| `onLinkPress` | `((url: string) => void)` | `—` | Override link navigation, for example to use the application's native router.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L17) |
| `renderLink` | `((url: string, children: ReactNode) => ReactNode \| undefined)` | `—` | Return undefined to keep the safe default, or replace a link with application content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L19) |
| `allowImages` | `boolean` | `—` | Disable external image loading while retaining readable alternative text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L21) |
| `allowVideos` | `boolean` | `—` | Disable video loading and navigation while retaining its caption.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L23) |
| `renderVideo` | `((url: string, caption: string) => ReactNode \| undefined)` | `—` | Optional application player, especially on native. Called only for safe, allowed URLs.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L25) |
| `labels` | `{ sourceFallback?: string; }` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L26) |
| `views` | `{ container?: ViewProps; block?: ViewProps; source?: ViewProps; notice?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L27) |
| `typing` | `boolean \| { charsPerTick?: number; intervalMs?: number; }` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L5) |
| `isStreaming` | `boolean` | `—` | Keep the cursor active while waiting for more content; completion waits for false.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L7) |
| `onTypingComplete` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Markdown/Markdown/Markdown.props.ts#L8) |

Common inherited styling props (7)

**Markdown inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/AttachmentGroup

@app-studio/components

# AttachmentGroup

The `AttachmentGroup` component displays a list of file attachments, typically used in chat interfaces or upload previews. It supports displaying thumbnails for images and videos, and generic icons for other file types. It also provides a mechanism to remove attachments.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx)

## Import

```ts
import { AttachmentGroup } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { AttachmentGroup } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Vertical } from 'app-studio';

export function AttachmentGroupExample() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <Vertical gap={16}>
      <Button
        variant="outline"
        onClick={() =>
          setFiles([
            new File(['Sample report'], 'report.txt', { type: 'text/plain' }),
          ])
        }
      >
        Add sample attachment
      </Button>
      <AttachmentGroup
        files={files}
        onRemove={(index) => setFiles(files.filter((_, i) => i !== index))}
      />
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**AttachmentGroup**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `files` Required | `File[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L31) |
| `sandboxId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L32) |
| `onRemove` Required | `(index: number) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L33) |
| `layout` | `"grid" \| "inline"` `"grid"``"inline"` | `'inline'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L34) |
| `maxHeight` | `string` | `'120px'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L35) |
| `showPreviews` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L36) |
| `views` | `{ container?: any; item?: any; name?: any; size?: any; removeButton?: any; }` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L37) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Avatar

@app-studio/components

# Avatar

Displays a user's avatar, which can be an image or initials, with customizable size and styles.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar.tsx)

## Import

```ts
import { Avatar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Avatar } from '@app-studio/components';

export const DefaultDemo = () => (
  <Avatar src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg" />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Avatar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L7) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L9) |
| `fallback` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L11) |
| `views` | `AvatarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L13) |
| `onClick` | `((event: React.MouseEvent<HTMLElement>) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L16) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Avatar/Avatar/Avatar.props.ts#L17) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Badge

@app-studio/components

# Badge

Renders a badge with various styles and states according to the design guidelines.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge.tsx)

## Import

```ts
import { Badge } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Badge } from '@app-studio/components';

export const DefaultDemo = () => <Badge content="default" />;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Badge**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L6) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L7) |
| `icon` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L8) |
| `pastil` | `string \| boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L9) |
| `pastilContent` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L10) |
| `action` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L11) |
| `variant` | `Variant` `"outline"``"link"``"filled"``"ghost"` | `'filled'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L12) |
| `position` | `Position` `"top-right"``"top-left"``"bottom-right"``"bottom-left"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L13) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L14) |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `'pill'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L15) |
| `views` | `BadgeStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L16) |
| `isAuto` | `boolean` | `false` | When the badge's `content` is a color token (`theme-*` / `color-*`), auto-derive the badge colors from it: the token becomes the background and the label switches to white (used by examples that loop over theme tokens for the `content` prop).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L23) |
| `config` | `Record<string, unknown>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Badge/Badge/Badge.props.ts#L26) |

Common inherited styling props (7)

**Badge inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Carousel

@app-studio/components

# Carousel

A versatile component for displaying a collection of content in a rotating sequence with navigation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel.tsx)

## Import

```ts
import { Carousel } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Carousel } from '@app-studio/components';
import { View } from 'app-studio';
import { Text } from 'app-studio';

export const DefaultDemo = () => {
  // Create an array of slides with different background colors
  const slides = [
    { color: 'color-blue-500', text: 'Slide 1' },
    { color: 'color-green-500', text: 'Slide 2' },
    { color: 'color-purple-500', text: 'Slide 3' },
    { color: 'color-orange-500', text: 'Slide 4' },
  ];

  return (
    <View height="300px" width="100%">
      <Carousel>
        {slides.map((slide, index) => (
          <View
            key={index}
            backgroundColor={slide.color}
            width="100%"
            height="100%"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Text color="white" fontSize="24px" fontWeight="bold">
              {slide.text}
            </Text>
          </View>
        ))}
      </Carousel>
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Carousel**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode[]` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L17) |
| `defaultActiveIndex` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L18) |
| `activeIndex` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L20) |
| `onChange` | `((index: number) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L22) |
| `showNavigation` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L24) |
| `navigationPosition` | `NavigationPosition` `"inside"``"outside"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L26) |
| `prevButton` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L28) |
| `nextButton` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L30) |
| `showIndicators` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L32) |
| `indicatorPosition` | `IndicatorPosition` `"bottom"``"top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L34) |
| `indicatorVariant` | `IndicatorVariant` `"number"``"line"``"dot"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L36) |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L38) |
| `autoPlayInterval` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L40) |
| `pauseOnHover` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L42) |
| `infinite` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L44) |
| `direction` | `SlideDirection` `"horizontal"``"vertical"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L46) |
| `transitionDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L48) |
| `stepIndices` | `number[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L50) |
| `views` | `CarouselStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L52) |

Common inherited styling props (7)

**Carousel inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Carousel.Slide

**Carousel.Slide**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L57) |
| `isActive` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L59) |
| `index` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L61) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L63) |

### Carousel.Content

**Carousel.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L68) |
| `views` | `Pick<CarouselStyles, "content" \| "innerContainer">` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L70) |

### Carousel.Item

**Carousel.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L75) |
| `views` | `Pick<CarouselStyles, "item">` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L77) |

### Carousel.Previous

**Carousel.Previous**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `Pick<CarouselStyles, "prevButton">` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L82) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L19) |
| `onClick` | `((...args: any) => any)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L41) |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `animation` | `Animation` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `label` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L99) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L33) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` | `—` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `—` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L43) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `borderMovingDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `startIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `endIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

### Carousel.Next

**Carousel.Next**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `views` | `Pick<CarouselStyles, "nextButton">` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Carousel/Carousel/Carousel.props.ts#L87) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L19) |
| `onClick` | `((...args: any) => any)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L41) |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `animation` | `Animation` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `label` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L99) |
| `shape` | `Shape` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `size` | `Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L33) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` | `—` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `—` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L43) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `borderMovingDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `startIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `endIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Chart

@app-studio/components

# Chart

A comprehensive charting component for visualizing data in various formats including bar, line, area, pie, and donut charts.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart.tsx)

## Import

```ts
import { Chart } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Chart } from '@app-studio/components';
import { View } from 'app-studio';
import { CHART_COLORS } from '@app-studio/components';

export const AreaChartDemo = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      {
        name: 'This Week',
        data: [10, 15, 12, 20, 18, 25, 22],
        color: CHART_COLORS.blue,
      },
      {
        name: 'Last Week',
        data: [8, 12, 10, 15, 14, 20, 17],
        color: CHART_COLORS.green,
      },
      {
        name: 'Two Weeks Ago',
        data: [6, 10, 8, 12, 10, 16, 14],
        color: CHART_COLORS.purple,
      },
    ],
  };

  return (
    <View height="300px" width="100%">
      <Chart
        type="area"
        data={data}
        title="Weekly Performance"
        showGrid
        animated
      />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Chart**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` Required | `"area" \| "line" \| "bar" \| "pie" \| "donut"` `"area"``"line"``"bar"``"pie"``"donut"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L11) |
| `data` | `ChartData` | `—` | Data to render.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L13) |
| `dataPoints` | `ChartDataPoint[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L15) |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L17) |
| `showLegend` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L19) |
| `legendPosition` | `"bottom" \| "left" \| "right" \| "top"` `"bottom"``"left"``"right"``"top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L21) |
| `showGrid` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L23) |
| `showTooltips` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L25) |
| `animated` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L27) |
| `animationDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L29) |
| `responsive` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L31) |
| `aspectRatio` | `number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021. **Syntax**: `auto \|\| <ratio>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **88** \| **89** \| **15** \| **88** \| No \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L33) |
| `width` | `string \| number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L35) |
| `height` | `string \| number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L37) |
| `views` | `ChartStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L39) |
| `onDataPointClick` | `((dataPoint: ChartDataPoint \| null, index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L41) |
| `onSeriesClick` | `((seriesName: string, index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L43) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L45) |
| `error` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L47) |
| `noData` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L49) |
| `loadingIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L51) |
| `errorIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L53) |
| `noDataIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L55) |
| `aria-label` | `string` | `—` | Defines a string value that labels the current element.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L57) |

Common inherited styling props (7)

**Chart inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Icon

@app-studio/components

# Icon

A comprehensive collection of SVG icons powered by [Lucide React](https://lucide.dev/), offering consistent styling, customizable colors, sizes, and orientations. All icons are optimized for accessibility and performance.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx)

## Import

```ts
import { Icon } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, Vertical, Text } from 'app-studio';
import { Icon } from '@app-studio/components';

export const DefaultIcon = () => (
  <Horizontal gap={16} flexWrap="wrap" alignItems="center">
    <Icon name="home" widthHeight={28} color="theme-primary" />
    <Icon name="settings" widthHeight={28} color="color-gray-700" />
    <Icon name="heart" widthHeight={28} color="color-red-500" filled />
    <Icon name="star" widthHeight={28} color="color-amber-500" filled />
    <Icon name="bell" widthHeight={28} color="color-gray-700" />
    <Vertical alignItems="center" gap={4}>
      <Icon name="circle-help" widthHeight={28} color="color-blue-500" />
      <Text fontSize={10} color="color-gray-500">
        by name
      </Text>
    </Vertical>
  </Horizontal>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Icon**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `'currentColor'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L43) |
| `filled` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L44) |
| `orientation` | `"left" \| "right" \| "up" \| "down"` `"left"``"right"``"up"``"down"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L45) |
| `name` | View type `"ratio" \| "target" \| "form" \| "rows" \| "list" \| "download" \| "blend" \| "type" \| "filter" \| "scale" \| "x" \| "columns" \| "container" \| "grid" \| "code" \| "link" \| "map" \| "menu" \| "option" \| "search" \| "section" \| "table" \| "video" \| "circle" \| "image" \| "text" \| "view" \| "square" \| "pill" \| "triangle" \| "repeat" \| "space" \| "scroll" \| "focus" \| "ghost" \| "files" \| "file" \| "underline" \| "dot" \| "donut" \| "a-arrow-down" \| "a-arrow-up" \| "a-large-small" \| "accessibility" \| "activity" \| "air-vent" \| "airplay" \| "alarm-clock-check" \| "alarm-check" \| "alarm-clock-minus" \| "alarm-minus" \| "alarm-clock-off" \| "alarm-clock-plus" \| "alarm-plus" \| "alarm-clock" \| "alarm-smoke" \| "album" \| "align-center-horizontal" \| "align-center-vertical" \| "align-end-horizontal" \| "align-end-vertical" \| "align-horizontal-distribute-center" \| "align-horizontal-distribute-end" \| "align-horizontal-distribute-start" \| "align-horizontal-justify-center" \| "align-horizontal-justify-end" \| "align-horizontal-justify-start" \| "align-horizontal-space-around" \| "align-horizontal-space-between" \| "align-start-horizontal" \| "align-start-vertical" \| "align-vertical-distribute-center" \| "align-vertical-distribute-end" \| "align-vertical-distribute-start" \| "align-vertical-justify-center" \| "align-vertical-justify-end" \| "align-vertical-justify-start" \| "align-vertical-space-around" \| "align-vertical-space-between" \| "ambulance" \| "ampersand" \| "ampersands" \| "amphora" \| "anchor" \| "angry" \| "annoyed" \| "antenna" \| "anvil" \| "aperture" \| "app-window-mac" \| "app-window" \| "apple" \| "archive-restore" \| "archive-x" \| "archive" \| "armchair" \| "arrow-big-down-dash" \| "arrow-big-down" \| "arrow-big-left-dash" \| "arrow-big-left" \| "arrow-big-right-dash" \| "arrow-big-right" \| "arrow-big-up-dash" \| "arrow-big-up" \| "arrow-down-0-1" \| "arrow-down-01" \| "arrow-down-1-0" \| "arrow-down-10" \| "arrow-down-a-z" \| "arrow-down-az" \| "arrow-down-from-line" \| "arrow-down-left" \| "arrow-down-narrow-wide" \| "arrow-down-right" \| "arrow-down-to-dot" \| "arrow-down-to-line" \| "arrow-down-up" \| "arrow-down-wide-narrow" \| "sort-desc" \| "arrow-down-z-a" \| "arrow-down-za" \| "arrow-down" \| "arrow-left-from-line" \| "arrow-left-right" \| "arrow-left-to-line" \| "arrow-left" \| "arrow-right-from-line" \| "arrow-right-left" \| "arrow-right-to-line" \| "arrow-right" \| "arrow-up-0-1" \| "arrow-up-01" \| "arrow-up-1-0" \| "arrow-up-10" \| "arrow-up-a-z" \| "arrow-up-az" \| "arrow-up-down" \| "arrow-up-from-dot" \| "arrow-up-from-line" \| "arrow-up-left" \| "arrow-up-narrow-wide" \| "sort-asc" \| "arrow-up-right" \| "arrow-up-to-line" \| "arrow-up-wide-narrow" \| "arrow-up-z-a" \| "arrow-up-za" \| "arrow-up" \| "arrows-up-from-line" \| "asterisk" \| "at-sign" \| "atom" \| "audio-lines" \| "audio-waveform" \| "award" \| "axe" \| "axis-3d" \| "axis-3-d" \| "baby" \| "backpack" \| "badge-alert" \| "badge-cent" \| "badge-check" \| "verified" \| "badge-dollar-sign" \| "badge-euro" \| "badge-indian-rupee" \| "badge-info" \| "badge-japanese-yen" \| "badge-minus" \| "badge-percent" \| "badge-plus" \| "badge-pound-sterling" \| "badge-question-mark" \| "badge-help" \| "badge-russian-ruble" \| "badge-swiss-franc" \| "badge-turkish-lira" \| "badge-x" \| "badge" \| "baggage-claim" \| "balloon" \| "ban" \| "banana" \| "bandage" \| "banknote-arrow-down" \| "banknote-arrow-up" \| "banknote-x" \| "banknote" \| "barcode" \| "barrel" \| "baseline" \| "bath" \| "battery-charging" \| "battery-full" \| "battery-low" \| "battery-medium" \| "battery-plus" \| "battery-warning" \| "battery" \| "beaker" \| "bean-off" \| "bean" \| "bed-double" \| "bed-single" \| "bed" \| "beef" \| "beer-off" \| "beer" \| "bell-dot" \| "bell-electric" \| "bell-minus" \| "bell-off" \| "bell-plus" \| "bell-ring" \| "bell" \| "between-horizontal-end" \| "between-horizonal-end" \| "between-horizontal-start" \| "between-horizonal-start" \| "between-vertical-end" \| "between-vertical-start" \| "biceps-flexed" \| "bike" \| "binary" \| "binoculars" \| "biohazard" \| "bird" \| "birdhouse" \| "bitcoin" \| "blinds" \| "blocks" \| "bluetooth-connected" \| "bluetooth-off" \| "bluetooth-searching" \| "bluetooth" \| "bold" \| "bolt" \| "bomb" \| "bone" \| "book-a" \| "book-alert" \| "book-audio" \| "book-check" \| "book-copy" \| "book-dashed" \| "book-template" \| "book-down" \| "book-headphones" \| "book-heart" \| "book-image" \| "book-key" \| "book-lock" \| "book-marked" \| "book-minus" \| "book-open-check" \| "book-open-text" \| "book-open" \| "book-plus" \| "book-search" \| "book-text" \| "book-type" \| "book-up-2" \| "book-up" \| "book-user" \| "book-x" \| "book" \| "bookmark-check" \| "bookmark-minus" \| "bookmark-plus" \| "bookmark-x" \| "bookmark" \| "boom-box" \| "bot-message-square" \| "bot-off" \| "bot" \| "bottle-wine" \| "bow-arrow" \| "box" \| "boxes" \| "braces" \| "curly-braces" \| "brackets" \| "brain-circuit" \| "brain-cog" \| "brain" \| "brick-wall-fire" \| "brick-wall-shield" \| "brick-wall" \| "briefcase-business" \| "briefcase-conveyor-belt" \| "briefcase-medical" \| "briefcase" \| "bring-to-front" \| "brush-cleaning" \| "brush" \| "bubbles" \| "bug-off" \| "bug-play" \| "bug" \| "building-2" \| "building" \| "bus-front" \| "bus" \| "cable-car" \| "cable" \| "cake-slice" \| "cake" \| "calculator" \| "calendar-1" \| "calendar-arrow-down" \| "calendar-arrow-up" \| "calendar-check-2" \| "calendar-check" \| "calendar-clock" \| "calendar-cog" \| "calendar-days" \| "calendar-fold" \| "calendar-heart" \| "calendar-minus-2" \| "calendar-minus" \| "calendar-off" \| "calendar-plus-2" \| "calendar-plus" \| "calendar-range" \| "calendar-search" \| "calendar-sync" \| "calendar-x-2" \| "calendar-x" \| "calendar" \| "calendars" \| "camera-off" \| "camera" \| "candy-cane" \| "candy-off" \| "candy" \| "cannabis-off" \| "cannabis" \| "captions-off" \| "captions" \| "subtitles" \| "car-front" \| "car-taxi-front" \| "car" \| "caravan" \| "card-sim" \| "carrot" \| "case-lower" \| "case-sensitive" \| "case-upper" \| "cassette-tape" \| "cast" \| "castle" \| "cat" \| "cctv" \| "chart-area" \| "area-chart" \| "chart-bar-big" \| "bar-chart-horizontal-big" \| "chart-bar-decreasing" \| "chart-bar-increasing" \| "chart-bar-stacked" \| "chart-bar" \| "bar-chart-horizontal" \| "chart-candlestick" \| "candlestick-chart" \| "chart-column-big" \| "bar-chart-big" \| "chart-column-decreasing" \| "chart-column-increasing" \| "bar-chart-4" \| "chart-column-stacked" \| "chart-column" \| "bar-chart-3" \| "chart-gantt" \| "chart-line" \| "line-chart" \| "chart-network" \| "chart-no-axes-column-decreasing" \| "chart-no-axes-column-increasing" \| "bar-chart" \| "chart-no-axes-column" \| "bar-chart-2" \| "chart-no-axes-combined" \| "chart-no-axes-gantt" \| "gantt-chart" \| "chart-pie" \| "pie-chart" \| "chart-scatter" \| "scatter-chart" \| "chart-spline" \| "check-check" \| "check-line" \| "check" \| "chef-hat" \| "cherry" \| "chess-bishop" \| "chess-king" \| "chess-knight" \| "chess-pawn" \| "chess-queen" \| "chess-rook" \| "chevron-down" \| "chevron-first" \| "chevron-last" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "chevrons-down-up" \| "chevrons-down" \| "chevrons-left-right-ellipsis" \| "chevrons-left-right" \| "chevrons-left" \| "chevrons-right-left" \| "chevrons-right" \| "chevrons-up-down" \| "chevrons-up" \| "chromium" \| "chrome" \| "church" \| "cigarette-off" \| "cigarette" \| "circle-alert" \| "alert-circle" \| "circle-arrow-down" \| "arrow-down-circle" \| "circle-arrow-left" \| "arrow-left-circle" \| "circle-arrow-out-down-left" \| "arrow-down-left-from-circle" \| "circle-arrow-out-down-right" \| "arrow-down-right-from-circle" \| "circle-arrow-out-up-left" \| "arrow-up-left-from-circle" \| "circle-arrow-out-up-right" \| "arrow-up-right-from-circle" \| "circle-arrow-right" \| "arrow-right-circle" \| "circle-arrow-up" \| "arrow-up-circle" \| "circle-check-big" \| "check-circle" \| "circle-check" \| "check-circle-2" \| "circle-chevron-down" \| "chevron-down-circle" \| "circle-chevron-left" \| "chevron-left-circle" \| "circle-chevron-right" \| "chevron-right-circle" \| "circle-chevron-up" \| "chevron-up-circle" \| "circle-dashed" \| "circle-divide" \| "divide-circle" \| "circle-dollar-sign" \| "circle-dot-dashed" \| "circle-dot" \| "circle-ellipsis" \| "circle-equal" \| "circle-fading-arrow-up" \| "circle-fading-plus" \| "circle-gauge" \| "gauge-circle" \| "circle-minus" \| "minus-circle" \| "circle-off" \| "circle-parking-off" \| "parking-circle-off" \| "circle-parking" \| "parking-circle" \| "circle-pause" \| "pause-circle" \| "circle-percent" \| "percent-circle" \| "circle-pile" \| "circle-play" \| "play-circle" \| "circle-plus" \| "plus-circle" \| "circle-pound-sterling" \| "circle-power" \| "power-circle" \| "circle-question-mark" \| "help-circle" \| "circle-help" \| "circle-slash-2" \| "circle-slashed" \| "circle-slash" \| "circle-small" \| "circle-star" \| "circle-stop" \| "stop-circle" \| "circle-user-round" \| "user-circle-2" \| "circle-user" \| "user-circle" \| "circle-x" \| "x-circle" \| "circuit-board" \| "citrus" \| "clapperboard" \| "clipboard-check" \| "clipboard-clock" \| "clipboard-copy" \| "clipboard-list" \| "clipboard-minus" \| "clipboard-paste" \| "clipboard-pen-line" \| "clipboard-signature" \| "clipboard-pen" \| "clipboard-edit" \| "clipboard-plus" \| "clipboard-type" \| "clipboard-x" \| "clipboard" \| "clock-1" \| "clock-10" \| "clock-11" \| "clock-12" \| "clock-2" \| "clock-3" \| "clock-4" \| "clock-5" \| "clock-6" \| "clock-7" \| "clock-8" \| "clock-9" \| "clock-alert" \| "clock-arrow-down" \| "clock-arrow-up" \| "clock-check" \| "clock-fading" \| "clock-plus" \| "clock" \| "closed-caption" \| "cloud-alert" \| "cloud-backup" \| "cloud-check" \| "cloud-cog" \| "cloud-download" \| "download-cloud" \| "cloud-drizzle" \| "cloud-fog" \| "cloud-hail" \| "cloud-lightning" \| "cloud-moon-rain" \| "cloud-moon" \| "cloud-off" \| "cloud-rain-wind" \| "cloud-rain" \| "cloud-snow" \| "cloud-sun-rain" \| "cloud-sun" \| "cloud-sync" \| "cloud-upload" \| "upload-cloud" \| "cloud" \| "cloudy" \| "clover" \| "club" \| "code-xml" \| "code-2" \| "codepen" \| "codesandbox" \| "coffee" \| "cog" \| "coins" \| "columns-2" \| "columns-3-cog" \| "columns-settings" \| "table-config" \| "columns-3" \| "panels-left-right" \| "columns-4" \| "combine" \| "command" \| "compass" \| "component" \| "computer" \| "concierge-bell" \| "cone" \| "construction" \| "contact-round" \| "contact-2" \| "contact" \| "contrast" \| "cookie" \| "cooking-pot" \| "copy-check" \| "copy-minus" \| "copy-plus" \| "copy-slash" \| "copy-x" \| "copy" \| "copyleft" \| "copyright" \| "corner-down-left" \| "corner-down-right" \| "corner-left-down" \| "corner-left-up" \| "corner-right-down" \| "corner-right-up" \| "corner-up-left" \| "corner-up-right" \| "cpu" \| "creative-commons" \| "credit-card" \| "croissant" \| "crop" \| "cross" \| "crosshair" \| "crown" \| "cuboid" \| "cup-soda" \| "currency" \| "cylinder" \| "dam" \| "database-backup" \| "database-zap" \| "database" \| "decimals-arrow-left" \| "decimals-arrow-right" \| "delete" \| "dessert" \| "diameter" \| "diamond-minus" \| "diamond-percent" \| "percent-diamond" \| "diamond-plus" \| "diamond" \| "dice-1" \| "dice-2" \| "dice-3" \| "dice-4" \| "dice-5" \| "dice-6" \| "dices" \| "diff" \| "disc-2" \| "disc-3" \| "disc-album" \| "disc" \| "divide" \| "dna-off" \| "dna" \| "dock" \| "dog" \| "dollar-sign" \| "door-closed-locked" \| "door-closed" \| "door-open" \| "drafting-compass" \| "drama" \| "dribbble" \| "drill" \| "drone" \| "droplet-off" \| "droplet" \| "droplets" \| "drum" \| "drumstick" \| "dumbbell" \| "ear-off" \| "ear" \| "earth-lock" \| "earth" \| "globe-2" \| "eclipse" \| "egg-fried" \| "egg-off" \| "egg" \| "ellipsis-vertical" \| "more-vertical" \| "ellipsis" \| "more-horizontal" \| "equal-approximately" \| "equal-not" \| "equal" \| "eraser" \| "ethernet-port" \| "euro" \| "ev-charger" \| "expand" \| "external-link" \| "eye-closed" \| "eye-off" \| "eye" \| "facebook" \| "factory" \| "fan" \| "fast-forward" \| "feather" \| "fence" \| "ferris-wheel" \| "figma" \| "file-archive" \| "file-axis-3d" \| "file-axis-3-d" \| "file-badge" \| "file-badge-2" \| "file-box" \| "file-braces-corner" \| "file-json-2" \| "file-braces" \| "file-json" \| "file-chart-column-increasing" \| "file-bar-chart" \| "file-chart-column" \| "file-bar-chart-2" \| "file-chart-line" \| "file-line-chart" \| "file-chart-pie" \| "file-pie-chart" \| "file-check-corner" \| "file-check-2" \| "file-check" \| "file-clock" \| "file-code-corner" \| "file-code-2" \| "file-code" \| "file-cog" \| "file-cog-2" \| "file-diff" \| "file-digit" \| "file-down" \| "file-exclamation-point" \| "file-warning" \| "file-headphone" \| "file-audio" \| "file-audio-2" \| "file-heart" \| "file-image" \| "file-input" \| "file-key" \| "file-key-2" \| "file-lock" \| "file-lock-2" \| "file-minus-corner" \| "file-minus-2" \| "file-minus" \| "file-music" \| "file-output" \| "file-pen-line" \| "file-signature" \| "file-pen" \| "file-edit" \| "file-play" \| "file-video" \| "file-plus-corner" \| "file-plus-2" \| "file-plus" \| "file-question-mark" \| "file-question" \| "file-scan" \| "file-search-corner" \| "file-search-2" \| "file-search" \| "file-signal" \| "file-volume-2" \| "file-sliders" \| "file-spreadsheet" \| "file-stack" \| "file-symlink" \| "file-terminal" \| "file-text" \| "file-type-corner" \| "file-type-2" \| "file-type" \| "file-up" \| "file-user" \| "file-video-camera" \| "file-video-2" \| "file-volume" \| "file-x-corner" \| "file-x-2" \| "file-x" \| "film" \| "fingerprint-pattern" \| "fingerprint" \| "fire-extinguisher" \| "fish-off" \| "fish-symbol" \| "fish" \| "fishing-hook" \| "flag-off" \| "flag-triangle-left" \| "flag-triangle-right" \| "flag" \| "flame-kindling" \| "flame" \| "flashlight-off" \| "flashlight" \| "flask-conical-off" \| "flask-conical" \| "flask-round" \| "flip-horizontal-2" \| "flip-horizontal" \| "flip-vertical-2" \| "flip-vertical" \| "flower-2" \| "flower" \| "fold-horizontal" \| "fold-vertical" \| "folder-archive" \| "folder-check" \| "folder-clock" \| "folder-closed" \| "folder-code" \| "folder-cog" \| "folder-cog-2" \| "folder-dot" \| "folder-down" \| "folder-git-2" \| "folder-git" \| "folder-heart" \| "folder-input" \| "folder-kanban" \| "folder-key" \| "folder-lock" \| "folder-minus" \| "folder-open-dot" \| "folder-open" \| "folder-output" \| "folder-pen" \| "folder-edit" \| "folder-plus" \| "folder-root" \| "folder-search-2" \| "folder-search" \| "folder-symlink" \| "folder-sync" \| "folder-tree" \| "folder-up" \| "folder-x" \| "folder" \| "folders" \| "footprints" \| "forklift" \| "forward" \| "frame" \| "framer" \| "frown" \| "fuel" \| "fullscreen" \| "funnel-plus" \| "funnel-x" \| "filter-x" \| "funnel" \| "gallery-horizontal-end" \| "gallery-horizontal" \| "gallery-thumbnails" \| "gallery-vertical-end" \| "gallery-vertical" \| "gamepad-2" \| "gamepad-directional" \| "gamepad" \| "gauge" \| "gavel" \| "gem" \| "georgian-lari" \| "gift" \| "git-branch-minus" \| "git-branch-plus" \| "git-branch" \| "git-commit-horizontal" \| "git-commit" \| "git-commit-vertical" \| "git-compare-arrows" \| "git-compare" \| "git-fork" \| "git-graph" \| "git-merge" \| "git-pull-request-arrow" \| "git-pull-request-closed" \| "git-pull-request-create-arrow" \| "git-pull-request-create" \| "git-pull-request-draft" \| "git-pull-request" \| "github" \| "gitlab" \| "glass-water" \| "glasses" \| "globe-lock" \| "globe" \| "goal" \| "gpu" \| "graduation-cap" \| "grape" \| "grid-2x2-check" \| "grid-2-x-2-check" \| "grid-2x2-plus" \| "grid-2-x-2-plus" \| "grid-2x2-x" \| "grid-2-x-2-x" \| "grid-2x2" \| "grid-2-x-2" \| "grid-3x2" \| "grid-3x3" \| "grid-3-x-3" \| "grip-horizontal" \| "grip-vertical" \| "grip" \| "group" \| "guitar" \| "ham" \| "hamburger" \| "hammer" \| "hand-coins" \| "hand-fist" \| "hand-grab" \| "grab" \| "hand-heart" \| "hand-helping" \| "helping-hand" \| "hand-metal" \| "hand-platter" \| "hand" \| "handbag" \| "handshake" \| "hard-drive-download" \| "hard-drive-upload" \| "hard-drive" \| "hard-hat" \| "hash" \| "hat-glasses" \| "haze" \| "hd" \| "hdmi-port" \| "heading-1" \| "heading-2" \| "heading-3" \| "heading-4" \| "heading-5" \| "heading-6" \| "heading" \| "headphone-off" \| "headphones" \| "headset" \| "heart-crack" \| "heart-handshake" \| "heart-minus" \| "heart-off" \| "heart-plus" \| "heart-pulse" \| "heart" \| "heater" \| "helicopter" \| "hexagon" \| "highlighter" \| "history" \| "hop-off" \| "hop" \| "hospital" \| "hotel" \| "hourglass" \| "house-heart" \| "house-plug" \| "house-plus" \| "house-wifi" \| "house" \| "home" \| "ice-cream-bowl" \| "ice-cream-2" \| "ice-cream-cone" \| "ice-cream" \| "id-card-lanyard" \| "id-card" \| "image-down" \| "image-minus" \| "image-off" \| "image-play" \| "image-plus" \| "image-up" \| "image-upscale" \| "images" \| "import" \| "inbox" \| "indian-rupee" \| "infinity" \| "info" \| "inspection-panel" \| "instagram" \| "italic" \| "iteration-ccw" \| "iteration-cw" \| "japanese-yen" \| "joystick" \| "kanban" \| "kayak" \| "key-round" \| "key-square" \| "key" \| "keyboard-music" \| "keyboard-off" \| "keyboard" \| "lamp-ceiling" \| "lamp-desk" \| "lamp-floor" \| "lamp-wall-down" \| "lamp-wall-up" \| "lamp" \| "land-plot" \| "landmark" \| "languages" \| "laptop-minimal-check" \| "laptop-minimal" \| "laptop-2" \| "laptop" \| "lasso-select" \| "lasso" \| "laugh" \| "layers-2" \| "layers-plus" \| "layers" \| "layers-3" \| "layout-dashboard" \| "layout-grid" \| "layout-list" \| "layout-panel-left" \| "layout-panel-top" \| "layout-template" \| "leaf" \| "leafy-green" \| "lectern" \| "library-big" \| "library" \| "life-buoy" \| "ligature" \| "lightbulb-off" \| "lightbulb" \| "line-squiggle" \| "link-2-off" \| "link-2" \| "linkedin" \| "list-check" \| "list-checks" \| "list-chevrons-down-up" \| "list-chevrons-up-down" \| "list-collapse" \| "list-end" \| "list-filter-plus" \| "list-filter" \| "list-indent-decrease" \| "outdent" \| "indent-decrease" \| "list-indent-increase" \| "indent" \| "indent-increase" \| "list-minus" \| "list-music" \| "list-ordered" \| "list-plus" \| "list-restart" \| "list-start" \| "list-todo" \| "list-tree" \| "list-video" \| "list-x" \| "loader-circle" \| "loader-2" \| "loader-pinwheel" \| "loader" \| "locate-fixed" \| "locate-off" \| "locate" \| "lock-keyhole-open" \| "unlock-keyhole" \| "lock-keyhole" \| "lock-open" \| "unlock" \| "lock" \| "log-in" \| "log-out" \| "logs" \| "lollipop" \| "luggage" \| "magnet" \| "mail-check" \| "mail-minus" \| "mail-open" \| "mail-plus" \| "mail-question-mark" \| "mail-question" \| "mail-search" \| "mail-warning" \| "mail-x" \| "mail" \| "mailbox" \| "mails" \| "map-minus" \| "map-pin-check-inside" \| "map-pin-check" \| "map-pin-house" \| "map-pin-minus-inside" \| "map-pin-minus" \| "map-pin-off" \| "map-pin-pen" \| "location-edit" \| "map-pin-plus-inside" \| "map-pin-plus" \| "map-pin-x-inside" \| "map-pin-x" \| "map-pin" \| "map-pinned" \| "map-plus" \| "mars-stroke" \| "mars" \| "martini" \| "maximize-2" \| "maximize" \| "medal" \| "megaphone-off" \| "megaphone" \| "meh" \| "memory-stick" \| "merge" \| "message-circle-code" \| "message-circle-dashed" \| "message-circle-heart" \| "message-circle-more" \| "message-circle-off" \| "message-circle-plus" \| "message-circle-question-mark" \| "message-circle-question" \| "message-circle-reply" \| "message-circle-warning" \| "message-circle-x" \| "message-circle" \| "message-square-code" \| "message-square-dashed" \| "message-square-diff" \| "message-square-dot" \| "message-square-heart" \| "message-square-lock" \| "message-square-more" \| "message-square-off" \| "message-square-plus" \| "message-square-quote" \| "message-square-reply" \| "message-square-share" \| "message-square-text" \| "message-square-warning" \| "message-square-x" \| "message-square" \| "messages-square" \| "mic-off" \| "mic-vocal" \| "mic-2" \| "mic" \| "microchip" \| "microscope" \| "microwave" \| "milestone" \| "milk-off" \| "milk" \| "minimize-2" \| "minimize" \| "minus" \| "monitor-check" \| "monitor-cloud" \| "monitor-cog" \| "monitor-dot" \| "monitor-down" \| "monitor-off" \| "monitor-pause" \| "monitor-play" \| "monitor-smartphone" \| "monitor-speaker" \| "monitor-stop" \| "monitor-up" \| "monitor-x" \| "monitor" \| "moon-star" \| "moon" \| "motorbike" \| "mountain-snow" \| "mountain" \| "mouse-off" \| "mouse-pointer-2-off" \| "mouse-pointer-2" \| "mouse-pointer-ban" \| "mouse-pointer-click" \| "mouse-pointer" \| "mouse" \| "move-3d" \| "move-3-d" \| "move-diagonal-2" \| "move-diagonal" \| "move-down-left" \| "move-down-right" \| "move-down" \| "move-horizontal" \| "move-left" \| "move-right" \| "move-up-left" \| "move-up-right" \| "move-up" \| "move-vertical" \| "move" \| "music-2" \| "music-3" \| "music-4" \| "music" \| "navigation-2-off" \| "navigation-2" \| "navigation-off" \| "navigation" \| "network" \| "newspaper" \| "nfc" \| "non-binary" \| "notebook-pen" \| "notebook-tabs" \| "notebook-text" \| "notebook" \| "notepad-text-dashed" \| "notepad-text" \| "nut-off" \| "nut" \| "octagon-alert" \| "alert-octagon" \| "octagon-minus" \| "octagon-pause" \| "pause-octagon" \| "octagon-x" \| "x-octagon" \| "octagon" \| "omega" \| "orbit" \| "origami" \| "package-2" \| "package-check" \| "package-minus" \| "package-open" \| "package-plus" \| "package-search" \| "package-x" \| "package" \| "paint-bucket" \| "paint-roller" \| "paintbrush-vertical" \| "paintbrush-2" \| "paintbrush" \| "palette" \| "panda" \| "panel-bottom-close" \| "panel-bottom-dashed" \| "panel-bottom-inactive" \| "panel-bottom-open" \| "panel-bottom" \| "panel-left-close" \| "sidebar-close" \| "panel-left-dashed" \| "panel-left-inactive" \| "panel-left-open" \| "sidebar-open" \| "panel-left-right-dashed" \| "panel-left" \| "sidebar" \| "panel-right-close" \| "panel-right-dashed" \| "panel-right-inactive" \| "panel-right-open" \| "panel-right" \| "panel-top-bottom-dashed" \| "panel-top-close" \| "panel-top-dashed" \| "panel-top-inactive" \| "panel-top-open" \| "panel-top" \| "panels-left-bottom" \| "panels-right-bottom" \| "panels-top-left" \| "layout" \| "paperclip" \| "parentheses" \| "parking-meter" \| "party-popper" \| "pause" \| "paw-print" \| "pc-case" \| "pen-line" \| "edit-3" \| "pen-off" \| "pen-tool" \| "pen" \| "edit-2" \| "pencil-line" \| "pencil-off" \| "pencil-ruler" \| "pencil" \| "pentagon" \| "percent" \| "person-standing" \| "philippine-peso" \| "phone-call" \| "phone-forwarded" \| "phone-incoming" \| "phone-missed" \| "phone-off" \| "phone-outgoing" \| "phone" \| "pi" \| "piano" \| "pickaxe" \| "picture-in-picture-2" \| "picture-in-picture" \| "piggy-bank" \| "pilcrow-left" \| "pilcrow-right" \| "pilcrow" \| "pill-bottle" \| "pin-off" \| "pin" \| "pipette" \| "pizza" \| "plane-landing" \| "plane-takeoff" \| "plane" \| "play" \| "plug-2" \| "plug-zap" \| "plug-zap-2" \| "plug" \| "plus" \| "pocket-knife" \| "pocket" \| "podcast" \| "pointer-off" \| "pointer" \| "popcorn" \| "popsicle" \| "pound-sterling" \| "power-off" \| "power" \| "presentation" \| "printer-check" \| "printer" \| "projector" \| "proportions" \| "puzzle" \| "pyramid" \| "qr-code" \| "quote" \| "rabbit" \| "radar" \| "radiation" \| "radical" \| "radio-receiver" \| "radio-tower" \| "radio" \| "radius" \| "rail-symbol" \| "rainbow" \| "rat" \| "receipt-cent" \| "receipt-euro" \| "receipt-indian-rupee" \| "receipt-japanese-yen" \| "receipt-pound-sterling" \| "receipt-russian-ruble" \| "receipt-swiss-franc" \| "receipt-text" \| "receipt-turkish-lira" \| "receipt" \| "rectangle-circle" \| "rectangle-ellipsis" \| "form-input" \| "rectangle-goggles" \| "rectangle-horizontal" \| "rectangle-vertical" \| "recycle" \| "redo-2" \| "redo-dot" \| "redo" \| "refresh-ccw-dot" \| "refresh-ccw" \| "refresh-cw-off" \| "refresh-cw" \| "refrigerator" \| "regex" \| "remove-formatting" \| "repeat-1" \| "repeat-2" \| "replace-all" \| "replace" \| "reply-all" \| "reply" \| "rewind" \| "ribbon" \| "rocket" \| "rocking-chair" \| "roller-coaster" \| "rose" \| "rotate-3d" \| "rotate-3-d" \| "rotate-ccw-key" \| "rotate-ccw-square" \| "rotate-ccw" \| "rotate-cw-square" \| "rotate-cw" \| "route-off" \| "route" \| "router" \| "rows-2" \| "rows-3" \| "panels-top-bottom" \| "rows-4" \| "rss" \| "ruler-dimension-line" \| "ruler" \| "russian-ruble" \| "sailboat" \| "salad" \| "sandwich" \| "satellite-dish" \| "satellite" \| "saudi-riyal" \| "save-all" \| "save-off" \| "save" \| "scale-3d" \| "scale-3-d" \| "scaling" \| "scan-barcode" \| "scan-eye" \| "scan-face" \| "scan-heart" \| "scan-line" \| "scan-qr-code" \| "scan-search" \| "scan-text" \| "scan" \| "school" \| "scissors-line-dashed" \| "scissors" \| "scooter" \| "screen-share-off" \| "screen-share" \| "scroll-text" \| "search-alert" \| "search-check" \| "search-code" \| "search-slash" \| "search-x" \| "send-horizontal" \| "send-horizonal" \| "send-to-back" \| "send" \| "separator-horizontal" \| "separator-vertical" \| "server-cog" \| "server-crash" \| "server-off" \| "server" \| "settings-2" \| "settings" \| "shapes" \| "share-2" \| "share" \| "sheet" \| "shell" \| "shield-alert" \| "shield-ban" \| "shield-check" \| "shield-ellipsis" \| "shield-half" \| "shield-minus" \| "shield-off" \| "shield-plus" \| "shield-question-mark" \| "shield-question" \| "shield-user" \| "shield-x" \| "shield-close" \| "shield" \| "ship-wheel" \| "ship" \| "shirt" \| "shopping-bag" \| "shopping-basket" \| "shopping-cart" \| "shovel" \| "shower-head" \| "shredder" \| "shrimp" \| "shrink" \| "shrub" \| "shuffle" \| "sigma" \| "signal-high" \| "signal-low" \| "signal-medium" \| "signal-zero" \| "signal" \| "signature" \| "signpost-big" \| "signpost" \| "siren" \| "skip-back" \| "skip-forward" \| "skull" \| "slack" \| "slash" \| "slice" \| "sliders-horizontal" \| "sliders-vertical" \| "sliders" \| "smartphone-charging" \| "smartphone-nfc" \| "smartphone" \| "smile-plus" \| "smile" \| "snail" \| "snowflake" \| "soap-dispenser-droplet" \| "sofa" \| "solar-panel" \| "soup" \| "spade" \| "sparkle" \| "sparkles" \| "stars" \| "speaker" \| "speech" \| "spell-check-2" \| "spell-check" \| "spline-pointer" \| "spline" \| "split" \| "spool" \| "spotlight" \| "spray-can" \| "sprout" \| "square-activity" \| "activity-square" \| "square-arrow-down-left" \| "arrow-down-left-square" \| "square-arrow-down-right" \| "arrow-down-right-square" \| "square-arrow-down" \| "arrow-down-square" \| "square-arrow-left" \| "arrow-left-square" \| "square-arrow-out-down-left" \| "arrow-down-left-from-square" \| "square-arrow-out-down-right" \| "arrow-down-right-from-square" \| "square-arrow-out-up-left" \| "arrow-up-left-from-square" \| "square-arrow-out-up-right" \| "arrow-up-right-from-square" \| "square-arrow-right" \| "arrow-right-square" \| "square-arrow-up-left" \| "arrow-up-left-square" \| "square-arrow-up-right" \| "arrow-up-right-square" \| "square-arrow-up" \| "arrow-up-square" \| "square-asterisk" \| "asterisk-square" \| "square-bottom-dashed-scissors" \| "scissors-square-dashed-bottom" \| "square-chart-gantt" \| "gantt-chart-square" \| "square-gantt-chart" \| "square-check-big" \| "check-square" \| "square-check" \| "check-square-2" \| "square-chevron-down" \| "chevron-down-square" \| "square-chevron-left" \| "chevron-left-square" \| "square-chevron-right" \| "chevron-right-square" \| "square-chevron-up" \| "chevron-up-square" \| "square-code" \| "code-square" \| "square-dashed-bottom-code" \| "square-dashed-bottom" \| "square-dashed-kanban" \| "kanban-square-dashed" \| "square-dashed-mouse-pointer" \| "mouse-pointer-square-dashed" \| "square-dashed-top-solid" \| "square-dashed" \| "box-select" \| "square-divide" \| "divide-square" \| "square-dot" \| "dot-square" \| "square-equal" \| "equal-square" \| "square-function" \| "function-square" \| "square-kanban" \| "kanban-square" \| "square-library" \| "library-square" \| "square-m" \| "m-square" \| "square-menu" \| "menu-square" \| "square-minus" \| "minus-square" \| "square-mouse-pointer" \| "inspect" \| "square-parking-off" \| "parking-square-off" \| "square-parking" \| "parking-square" \| "square-pause" \| "square-pen" \| "pen-box" \| "edit" \| "pen-square" \| "square-percent" \| "percent-square" \| "square-pi" \| "pi-square" \| "square-pilcrow" \| "pilcrow-square" \| "square-play" \| "play-square" \| "square-plus" \| "plus-square" \| "square-power" \| "power-square" \| "square-radical" \| "square-round-corner" \| "square-scissors" \| "scissors-square" \| "square-sigma" \| "sigma-square" \| "square-slash" \| "slash-square" \| "square-split-horizontal" \| "split-square-horizontal" \| "square-split-vertical" \| "split-square-vertical" \| "square-square" \| "square-stack" \| "square-star" \| "square-stop" \| "square-terminal" \| "terminal-square" \| "square-user-round" \| "user-square-2" \| "square-user" \| "user-square" \| "square-x" \| "x-square" \| "squares-exclude" \| "squares-intersect" \| "squares-subtract" \| "squares-unite" \| "squircle-dashed" \| "squircle" \| "squirrel" \| "stamp" \| "star-half" \| "star-off" \| "star" \| "step-back" \| "step-forward" \| "stethoscope" \| "sticker" \| "sticky-note" \| "stone" \| "store" \| "stretch-horizontal" \| "stretch-vertical" \| "strikethrough" \| "subscript" \| "sun-dim" \| "sun-medium" \| "sun-moon" \| "sun-snow" \| "sun" \| "sunrise" \| "sunset" \| "superscript" \| "swatch-book" \| "swiss-franc" \| "switch-camera" \| "sword" \| "swords" \| "syringe" \| "table-2" \| "table-cells-merge" \| "table-cells-split" \| "table-columns-split" \| "table-of-contents" \| "table-properties" \| "table-rows-split" \| "tablet-smartphone" \| "tablet" \| "tablets" \| "tag" \| "tags" \| "tally-1" \| "tally-2" \| "tally-3" \| "tally-4" \| "tally-5" \| "tangent" \| "telescope" \| "tent-tree" \| "tent" \| "terminal" \| "test-tube-diagonal" \| "test-tube-2" \| "test-tube" \| "test-tubes" \| "text-align-center" \| "align-center" \| "text-align-end" \| "align-right" \| "text-align-justify" \| "align-justify" \| "text-align-start" \| "align-left" \| "text-cursor-input" \| "text-cursor" \| "text-initial" \| "letter-text" \| "text-quote" \| "text-search" \| "text-select" \| "text-selection" \| "text-wrap" \| "wrap-text" \| "theater" \| "thermometer-snowflake" \| "thermometer-sun" \| "thermometer" \| "thumbs-down" \| "thumbs-up" \| "ticket-check" \| "ticket-minus" \| "ticket-percent" \| "ticket-plus" \| "ticket-slash" \| "ticket-x" \| "ticket" \| "tickets-plane" \| "tickets" \| "timer-off" \| "timer-reset" \| "timer" \| "toggle-left" \| "toggle-right" \| "toilet" \| "tool-case" \| "toolbox" \| "tornado" \| "torus" \| "touchpad-off" \| "touchpad" \| "tower-control" \| "toy-brick" \| "tractor" \| "traffic-cone" \| "train-front-tunnel" \| "train-front" \| "train-track" \| "tram-front" \| "train" \| "transgender" \| "trash-2" \| "trash" \| "tree-deciduous" \| "tree-palm" \| "palmtree" \| "tree-pine" \| "trees" \| "trello" \| "trending-down" \| "trending-up-down" \| "trending-up" \| "triangle-alert" \| "alert-triangle" \| "triangle-dashed" \| "triangle-right" \| "trophy" \| "truck-electric" \| "truck" \| "turkish-lira" \| "turntable" \| "turtle" \| "tv-minimal-play" \| "tv-minimal" \| "tv-2" \| "tv" \| "twitch" \| "twitter" \| "type-outline" \| "umbrella-off" \| "umbrella" \| "undo-2" \| "undo-dot" \| "undo" \| "unfold-horizontal" \| "unfold-vertical" \| "ungroup" \| "university" \| "school-2" \| "unlink-2" \| "unlink" \| "unplug" \| "upload" \| "usb" \| "user-check" \| "user-cog" \| "user-lock" \| "user-minus" \| "user-pen" \| "user-plus" \| "user-round-check" \| "user-check-2" \| "user-round-cog" \| "user-cog-2" \| "user-round-minus" \| "user-minus-2" \| "user-round-pen" \| "user-round-plus" \| "user-plus-2" \| "user-round-search" \| "user-round-x" \| "user-x-2" \| "user-round" \| "user-2" \| "user-search" \| "user-star" \| "user-x" \| "user" \| "users-round" \| "users-2" \| "users" \| "utensils-crossed" \| "fork-knife-crossed" \| "utensils" \| "fork-knife" \| "utility-pole" \| "van" \| "variable" \| "vault" \| "vector-square" \| "vegan" \| "venetian-mask" \| "venus-and-mars" \| "venus" \| "vibrate-off" \| "vibrate" \| "video-off" \| "videotape" \| "voicemail" \| "volleyball" \| "volume-1" \| "volume-2" \| "volume-off" \| "volume-x" \| "volume" \| "vote" \| "wallet-cards" \| "wallet-minimal" \| "wallet-2" \| "wallet" \| "wallpaper" \| "wand-sparkles" \| "wand-2" \| "wand" \| "warehouse" \| "washing-machine" \| "watch" \| "waves-arrow-down" \| "waves-arrow-up" \| "waves-ladder" \| "waves" \| "waypoints" \| "webcam" \| "webhook-off" \| "webhook" \| "weight-tilde" \| "weight" \| "wheat-off" \| "wheat" \| "whole-word" \| "wifi-cog" \| "wifi-high" \| "wifi-low" \| "wifi-off" \| "wifi-pen" \| "wifi-sync" \| "wifi-zero" \| "wifi" \| "wind-arrow-down" \| "wind" \| "wine-off" \| "wine" \| "workflow" \| "worm" \| "wrench" \| "youtube" \| "zap-off" \| "zap" \| "zoom-in" \| "zoom-out"` `"ratio"``"target"``"form"``"rows"``"list"``"download"``"blend"``"type"``"filter"``"scale"``"x"``"columns"``"container"``"grid"``"code"``"link"``"map"``"menu"``"option"``"search"``"section"``"table"``"video"``"circle"``"image"``"text"``"view"``"square"``"pill"``"triangle"``"repeat"``"space"``"scroll"``"focus"``"ghost"``"files"``"file"``"underline"``"dot"``"donut"``"a-arrow-down"``"a-arrow-up"``"a-large-small"``"accessibility"``"activity"``"air-vent"``"airplay"``"alarm-clock-check"``"alarm-check"``"alarm-clock-minus"``"alarm-minus"``"alarm-clock-off"``"alarm-clock-plus"``"alarm-plus"``"alarm-clock"``"alarm-smoke"``"album"``"align-center-horizontal"``"align-center-vertical"``"align-end-horizontal"``"align-end-vertical"``"align-horizontal-distribute-center"``"align-horizontal-distribute-end"``"align-horizontal-distribute-start"``"align-horizontal-justify-center"``"align-horizontal-justify-end"``"align-horizontal-justify-start"``"align-horizontal-space-around"``"align-horizontal-space-between"``"align-start-horizontal"``"align-start-vertical"``"align-vertical-distribute-center"``"align-vertical-distribute-end"``"align-vertical-distribute-start"``"align-vertical-justify-center"``"align-vertical-justify-end"``"align-vertical-justify-start"``"align-vertical-space-around"``"align-vertical-space-between"``"ambulance"``"ampersand"``"ampersands"``"amphora"``"anchor"``"angry"``"annoyed"``"antenna"``"anvil"``"aperture"``"app-window-mac"``"app-window"``"apple"``"archive-restore"``"archive-x"``"archive"``"armchair"``"arrow-big-down-dash"``"arrow-big-down"``"arrow-big-left-dash"``"arrow-big-left"``"arrow-big-right-dash"``"arrow-big-right"``"arrow-big-up-dash"``"arrow-big-up"``"arrow-down-0-1"``"arrow-down-01"``"arrow-down-1-0"``"arrow-down-10"``"arrow-down-a-z"``"arrow-down-az"``"arrow-down-from-line"``"arrow-down-left"``"arrow-down-narrow-wide"``"arrow-down-right"``"arrow-down-to-dot"``"arrow-down-to-line"``"arrow-down-up"``"arrow-down-wide-narrow"``"sort-desc"``"arrow-down-z-a"``"arrow-down-za"``"arrow-down"``"arrow-left-from-line"``"arrow-left-right"``"arrow-left-to-line"``"arrow-left"``"arrow-right-from-line"``"arrow-right-left"``"arrow-right-to-line"``"arrow-right"``"arrow-up-0-1"``"arrow-up-01"``"arrow-up-1-0"``"arrow-up-10"``"arrow-up-a-z"``"arrow-up-az"``"arrow-up-down"``"arrow-up-from-dot"``"arrow-up-from-line"``"arrow-up-left"``"arrow-up-narrow-wide"``"sort-asc"``"arrow-up-right"``"arrow-up-to-line"``"arrow-up-wide-narrow"``"arrow-up-z-a"``"arrow-up-za"``"arrow-up"``"arrows-up-from-line"``"asterisk"``"at-sign"``"atom"``"audio-lines"``"audio-waveform"``"award"``"axe"``"axis-3d"``"axis-3-d"``"baby"``"backpack"``"badge-alert"``"badge-cent"``"badge-check"``"verified"``"badge-dollar-sign"``"badge-euro"``"badge-indian-rupee"``"badge-info"``"badge-japanese-yen"``"badge-minus"``"badge-percent"``"badge-plus"``"badge-pound-sterling"``"badge-question-mark"``"badge-help"``"badge-russian-ruble"``"badge-swiss-franc"``"badge-turkish-lira"``"badge-x"``"badge"``"baggage-claim"``"balloon"``"ban"``"banana"``"bandage"``"banknote-arrow-down"``"banknote-arrow-up"``"banknote-x"``"banknote"``"barcode"``"barrel"``"baseline"``"bath"``"battery-charging"``"battery-full"``"battery-low"``"battery-medium"``"battery-plus"``"battery-warning"``"battery"``"beaker"``"bean-off"``"bean"``"bed-double"``"bed-single"``"bed"``"beef"``"beer-off"``"beer"``"bell-dot"``"bell-electric"``"bell-minus"``"bell-off"``"bell-plus"``"bell-ring"``"bell"``"between-horizontal-end"``"between-horizonal-end"``"between-horizontal-start"``"between-horizonal-start"``"between-vertical-end"``"between-vertical-start"``"biceps-flexed"``"bike"``"binary"``"binoculars"``"biohazard"``"bird"``"birdhouse"``"bitcoin"``"blinds"``"blocks"``"bluetooth-connected"``"bluetooth-off"``"bluetooth-searching"``"bluetooth"``"bold"``"bolt"``"bomb"``"bone"``"book-a"``"book-alert"``"book-audio"``"book-check"``"book-copy"``"book-dashed"``"book-template"``"book-down"``"book-headphones"``"book-heart"``"book-image"``"book-key"``"book-lock"``"book-marked"``"book-minus"``"book-open-check"``"book-open-text"``"book-open"``"book-plus"``"book-search"``"book-text"``"book-type"``"book-up-2"``"book-up"``"book-user"``"book-x"``"book"``"bookmark-check"``"bookmark-minus"``"bookmark-plus"``"bookmark-x"``"bookmark"``"boom-box"``"bot-message-square"``"bot-off"``"bot"``"bottle-wine"``"bow-arrow"``"box"``"boxes"``"braces"``"curly-braces"``"brackets"``"brain-circuit"``"brain-cog"``"brain"``"brick-wall-fire"``"brick-wall-shield"``"brick-wall"``"briefcase-business"``"briefcase-conveyor-belt"``"briefcase-medical"``"briefcase"``"bring-to-front"``"brush-cleaning"``"brush"``"bubbles"``"bug-off"``"bug-play"``"bug"``"building-2"``"building"``"bus-front"``"bus"``"cable-car"``"cable"``"cake-slice"``"cake"``"calculator"``"calendar-1"``"calendar-arrow-down"``"calendar-arrow-up"``"calendar-check-2"``"calendar-check"``"calendar-clock"``"calendar-cog"``"calendar-days"``"calendar-fold"``"calendar-heart"``"calendar-minus-2"``"calendar-minus"``"calendar-off"``"calendar-plus-2"``"calendar-plus"``"calendar-range"``"calendar-search"``"calendar-sync"``"calendar-x-2"``"calendar-x"``"calendar"``"calendars"``"camera-off"``"camera"``"candy-cane"``"candy-off"``"candy"``"cannabis-off"``"cannabis"``"captions-off"``"captions"``"subtitles"``"car-front"``"car-taxi-front"``"car"``"caravan"``"card-sim"``"carrot"``"case-lower"``"case-sensitive"``"case-upper"``"cassette-tape"``"cast"``"castle"``"cat"``"cctv"``"chart-area"``"area-chart"``"chart-bar-big"``"bar-chart-horizontal-big"``"chart-bar-decreasing"``"chart-bar-increasing"``"chart-bar-stacked"``"chart-bar"``"bar-chart-horizontal"``"chart-candlestick"``"candlestick-chart"``"chart-column-big"``"bar-chart-big"``"chart-column-decreasing"``"chart-column-increasing"``"bar-chart-4"``"chart-column-stacked"``"chart-column"``"bar-chart-3"``"chart-gantt"``"chart-line"``"line-chart"``"chart-network"``"chart-no-axes-column-decreasing"``"chart-no-axes-column-increasing"``"bar-chart"``"chart-no-axes-column"``"bar-chart-2"``"chart-no-axes-combined"``"chart-no-axes-gantt"``"gantt-chart"``"chart-pie"``"pie-chart"``"chart-scatter"``"scatter-chart"``"chart-spline"``"check-check"``"check-line"``"check"``"chef-hat"``"cherry"``"chess-bishop"``"chess-king"``"chess-knight"``"chess-pawn"``"chess-queen"``"chess-rook"``"chevron-down"``"chevron-first"``"chevron-last"``"chevron-left"``"chevron-right"``"chevron-up"``"chevrons-down-up"``"chevrons-down"``"chevrons-left-right-ellipsis"``"chevrons-left-right"``"chevrons-left"``"chevrons-right-left"``"chevrons-right"``"chevrons-up-down"``"chevrons-up"``"chromium"``"chrome"``"church"``"cigarette-off"``"cigarette"``"circle-alert"``"alert-circle"``"circle-arrow-down"``"arrow-down-circle"``"circle-arrow-left"``"arrow-left-circle"``"circle-arrow-out-down-left"``"arrow-down-left-from-circle"``"circle-arrow-out-down-right"``"arrow-down-right-from-circle"``"circle-arrow-out-up-left"``"arrow-up-left-from-circle"``"circle-arrow-out-up-right"``"arrow-up-right-from-circle"``"circle-arrow-right"``"arrow-right-circle"``"circle-arrow-up"``"arrow-up-circle"``"circle-check-big"``"check-circle"``"circle-check"``"check-circle-2"``"circle-chevron-down"``"chevron-down-circle"``"circle-chevron-left"``"chevron-left-circle"``"circle-chevron-right"``"chevron-right-circle"``"circle-chevron-up"``"chevron-up-circle"``"circle-dashed"``"circle-divide"``"divide-circle"``"circle-dollar-sign"``"circle-dot-dashed"``"circle-dot"``"circle-ellipsis"``"circle-equal"``"circle-fading-arrow-up"``"circle-fading-plus"``"circle-gauge"``"gauge-circle"``"circle-minus"``"minus-circle"``"circle-off"``"circle-parking-off"``"parking-circle-off"``"circle-parking"``"parking-circle"``"circle-pause"``"pause-circle"``"circle-percent"``"percent-circle"``"circle-pile"``"circle-play"``"play-circle"``"circle-plus"``"plus-circle"``"circle-pound-sterling"``"circle-power"``"power-circle"``"circle-question-mark"``"help-circle"``"circle-help"``"circle-slash-2"``"circle-slashed"``"circle-slash"``"circle-small"``"circle-star"``"circle-stop"``"stop-circle"``"circle-user-round"``"user-circle-2"``"circle-user"``"user-circle"``"circle-x"``"x-circle"``"circuit-board"``"citrus"``"clapperboard"``"clipboard-check"``"clipboard-clock"``"clipboard-copy"``"clipboard-list"``"clipboard-minus"``"clipboard-paste"``"clipboard-pen-line"``"clipboard-signature"``"clipboard-pen"``"clipboard-edit"``"clipboard-plus"``"clipboard-type"``"clipboard-x"``"clipboard"``"clock-1"``"clock-10"``"clock-11"``"clock-12"``"clock-2"``"clock-3"``"clock-4"``"clock-5"``"clock-6"``"clock-7"``"clock-8"``"clock-9"``"clock-alert"``"clock-arrow-down"``"clock-arrow-up"``"clock-check"``"clock-fading"``"clock-plus"``"clock"``"closed-caption"``"cloud-alert"``"cloud-backup"``"cloud-check"``"cloud-cog"``"cloud-download"``"download-cloud"``"cloud-drizzle"``"cloud-fog"``"cloud-hail"``"cloud-lightning"``"cloud-moon-rain"``"cloud-moon"``"cloud-off"``"cloud-rain-wind"``"cloud-rain"``"cloud-snow"``"cloud-sun-rain"``"cloud-sun"``"cloud-sync"``"cloud-upload"``"upload-cloud"``"cloud"``"cloudy"``"clover"``"club"``"code-xml"``"code-2"``"codepen"``"codesandbox"``"coffee"``"cog"``"coins"``"columns-2"``"columns-3-cog"``"columns-settings"``"table-config"``"columns-3"``"panels-left-right"``"columns-4"``"combine"``"command"``"compass"``"component"``"computer"``"concierge-bell"``"cone"``"construction"``"contact-round"``"contact-2"``"contact"``"contrast"``"cookie"``"cooking-pot"``"copy-check"``"copy-minus"``"copy-plus"``"copy-slash"``"copy-x"``"copy"``"copyleft"``"copyright"``"corner-down-left"``"corner-down-right"``"corner-left-down"``"corner-left-up"``"corner-right-down"``"corner-right-up"``"corner-up-left"``"corner-up-right"``"cpu"``"creative-commons"``"credit-card"``"croissant"``"crop"``"cross"``"crosshair"``"crown"``"cuboid"``"cup-soda"``"currency"``"cylinder"``"dam"``"database-backup"``"database-zap"``"database"``"decimals-arrow-left"``"decimals-arrow-right"``"delete"``"dessert"``"diameter"``"diamond-minus"``"diamond-percent"``"percent-diamond"``"diamond-plus"``"diamond"``"dice-1"``"dice-2"``"dice-3"``"dice-4"``"dice-5"``"dice-6"``"dices"``"diff"``"disc-2"``"disc-3"``"disc-album"``"disc"``"divide"``"dna-off"``"dna"``"dock"``"dog"``"dollar-sign"``"door-closed-locked"``"door-closed"``"door-open"``"drafting-compass"``"drama"``"dribbble"``"drill"``"drone"``"droplet-off"``"droplet"``"droplets"``"drum"``"drumstick"``"dumbbell"``"ear-off"``"ear"``"earth-lock"``"earth"``"globe-2"``"eclipse"``"egg-fried"``"egg-off"``"egg"``"ellipsis-vertical"``"more-vertical"``"ellipsis"``"more-horizontal"``"equal-approximately"``"equal-not"``"equal"``"eraser"``"ethernet-port"``"euro"``"ev-charger"``"expand"``"external-link"``"eye-closed"``"eye-off"``"eye"``"facebook"``"factory"``"fan"``"fast-forward"``"feather"``"fence"``"ferris-wheel"``"figma"``"file-archive"``"file-axis-3d"``"file-axis-3-d"``"file-badge"``"file-badge-2"``"file-box"``"file-braces-corner"``"file-json-2"``"file-braces"``"file-json"``"file-chart-column-increasing"``"file-bar-chart"``"file-chart-column"``"file-bar-chart-2"``"file-chart-line"``"file-line-chart"``"file-chart-pie"``"file-pie-chart"``"file-check-corner"``"file-check-2"``"file-check"``"file-clock"``"file-code-corner"``"file-code-2"``"file-code"``"file-cog"``"file-cog-2"``"file-diff"``"file-digit"``"file-down"``"file-exclamation-point"``"file-warning"``"file-headphone"``"file-audio"``"file-audio-2"``"file-heart"``"file-image"``"file-input"``"file-key"``"file-key-2"``"file-lock"``"file-lock-2"``"file-minus-corner"``"file-minus-2"``"file-minus"``"file-music"``"file-output"``"file-pen-line"``"file-signature"``"file-pen"``"file-edit"``"file-play"``"file-video"``"file-plus-corner"``"file-plus-2"``"file-plus"``"file-question-mark"``"file-question"``"file-scan"``"file-search-corner"``"file-search-2"``"file-search"``"file-signal"``"file-volume-2"``"file-sliders"``"file-spreadsheet"``"file-stack"``"file-symlink"``"file-terminal"``"file-text"``"file-type-corner"``"file-type-2"``"file-type"``"file-up"``"file-user"``"file-video-camera"``"file-video-2"``"file-volume"``"file-x-corner"``"file-x-2"``"file-x"``"film"``"fingerprint-pattern"``"fingerprint"``"fire-extinguisher"``"fish-off"``"fish-symbol"``"fish"``"fishing-hook"``"flag-off"``"flag-triangle-left"``"flag-triangle-right"``"flag"``"flame-kindling"``"flame"``"flashlight-off"``"flashlight"``"flask-conical-off"``"flask-conical"``"flask-round"``"flip-horizontal-2"``"flip-horizontal"``"flip-vertical-2"``"flip-vertical"``"flower-2"``"flower"``"fold-horizontal"``"fold-vertical"``"folder-archive"``"folder-check"``"folder-clock"``"folder-closed"``"folder-code"``"folder-cog"``"folder-cog-2"``"folder-dot"``"folder-down"``"folder-git-2"``"folder-git"``"folder-heart"``"folder-input"``"folder-kanban"``"folder-key"``"folder-lock"``"folder-minus"``"folder-open-dot"``"folder-open"``"folder-output"``"folder-pen"``"folder-edit"``"folder-plus"``"folder-root"``"folder-search-2"``"folder-search"``"folder-symlink"``"folder-sync"``"folder-tree"``"folder-up"``"folder-x"``"folder"``"folders"``"footprints"``"forklift"``"forward"``"frame"``"framer"``"frown"``"fuel"``"fullscreen"``"funnel-plus"``"funnel-x"``"filter-x"``"funnel"``"gallery-horizontal-end"``"gallery-horizontal"``"gallery-thumbnails"``"gallery-vertical-end"``"gallery-vertical"``"gamepad-2"``"gamepad-directional"``"gamepad"``"gauge"``"gavel"``"gem"``"georgian-lari"``"gift"``"git-branch-minus"``"git-branch-plus"``"git-branch"``"git-commit-horizontal"``"git-commit"``"git-commit-vertical"``"git-compare-arrows"``"git-compare"``"git-fork"``"git-graph"``"git-merge"``"git-pull-request-arrow"``"git-pull-request-closed"``"git-pull-request-create-arrow"``"git-pull-request-create"``"git-pull-request-draft"``"git-pull-request"``"github"``"gitlab"``"glass-water"``"glasses"``"globe-lock"``"globe"``"goal"``"gpu"``"graduation-cap"``"grape"``"grid-2x2-check"``"grid-2-x-2-check"``"grid-2x2-plus"``"grid-2-x-2-plus"``"grid-2x2-x"``"grid-2-x-2-x"``"grid-2x2"``"grid-2-x-2"``"grid-3x2"``"grid-3x3"``"grid-3-x-3"``"grip-horizontal"``"grip-vertical"``"grip"``"group"``"guitar"``"ham"``"hamburger"``"hammer"``"hand-coins"``"hand-fist"``"hand-grab"``"grab"``"hand-heart"``"hand-helping"``"helping-hand"``"hand-metal"``"hand-platter"``"hand"``"handbag"``"handshake"``"hard-drive-download"``"hard-drive-upload"``"hard-drive"``"hard-hat"``"hash"``"hat-glasses"``"haze"``"hd"``"hdmi-port"``"heading-1"``"heading-2"``"heading-3"``"heading-4"``"heading-5"``"heading-6"``"heading"``"headphone-off"``"headphones"``"headset"``"heart-crack"``"heart-handshake"``"heart-minus"``"heart-off"``"heart-plus"``"heart-pulse"``"heart"``"heater"``"helicopter"``"hexagon"``"highlighter"``"history"``"hop-off"``"hop"``"hospital"``"hotel"``"hourglass"``"house-heart"``"house-plug"``"house-plus"``"house-wifi"``"house"``"home"``"ice-cream-bowl"``"ice-cream-2"``"ice-cream-cone"``"ice-cream"``"id-card-lanyard"``"id-card"``"image-down"``"image-minus"``"image-off"``"image-play"``"image-plus"``"image-up"``"image-upscale"``"images"``"import"``"inbox"``"indian-rupee"``"infinity"``"info"``"inspection-panel"``"instagram"``"italic"``"iteration-ccw"``"iteration-cw"``"japanese-yen"``"joystick"``"kanban"``"kayak"``"key-round"``"key-square"``"key"``"keyboard-music"``"keyboard-off"``"keyboard"``"lamp-ceiling"``"lamp-desk"``"lamp-floor"``"lamp-wall-down"``"lamp-wall-up"``"lamp"``"land-plot"``"landmark"``"languages"``"laptop-minimal-check"``"laptop-minimal"``"laptop-2"``"laptop"``"lasso-select"``"lasso"``"laugh"``"layers-2"``"layers-plus"``"layers"``"layers-3"``"layout-dashboard"``"layout-grid"``"layout-list"``"layout-panel-left"``"layout-panel-top"``"layout-template"``"leaf"``"leafy-green"``"lectern"``"library-big"``"library"``"life-buoy"``"ligature"``"lightbulb-off"``"lightbulb"``"line-squiggle"``"link-2-off"``"link-2"``"linkedin"``"list-check"``"list-checks"``"list-chevrons-down-up"``"list-chevrons-up-down"``"list-collapse"``"list-end"``"list-filter-plus"``"list-filter"``"list-indent-decrease"``"outdent"``"indent-decrease"``"list-indent-increase"``"indent"``"indent-increase"``"list-minus"``"list-music"``"list-ordered"``"list-plus"``"list-restart"``"list-start"``"list-todo"``"list-tree"``"list-video"``"list-x"``"loader-circle"``"loader-2"``"loader-pinwheel"``"loader"``"locate-fixed"``"locate-off"``"locate"``"lock-keyhole-open"``"unlock-keyhole"``"lock-keyhole"``"lock-open"``"unlock"``"lock"``"log-in"``"log-out"``"logs"``"lollipop"``"luggage"``"magnet"``"mail-check"``"mail-minus"``"mail-open"``"mail-plus"``"mail-question-mark"``"mail-question"``"mail-search"``"mail-warning"``"mail-x"``"mail"``"mailbox"``"mails"``"map-minus"``"map-pin-check-inside"``"map-pin-check"``"map-pin-house"``"map-pin-minus-inside"``"map-pin-minus"``"map-pin-off"``"map-pin-pen"``"location-edit"``"map-pin-plus-inside"``"map-pin-plus"``"map-pin-x-inside"``"map-pin-x"``"map-pin"``"map-pinned"``"map-plus"``"mars-stroke"``"mars"``"martini"``"maximize-2"``"maximize"``"medal"``"megaphone-off"``"megaphone"``"meh"``"memory-stick"``"merge"``"message-circle-code"``"message-circle-dashed"``"message-circle-heart"``"message-circle-more"``"message-circle-off"``"message-circle-plus"``"message-circle-question-mark"``"message-circle-question"``"message-circle-reply"``"message-circle-warning"``"message-circle-x"``"message-circle"``"message-square-code"``"message-square-dashed"``"message-square-diff"``"message-square-dot"``"message-square-heart"``"message-square-lock"``"message-square-more"``"message-square-off"``"message-square-plus"``"message-square-quote"``"message-square-reply"``"message-square-share"``"message-square-text"``"message-square-warning"``"message-square-x"``"message-square"``"messages-square"``"mic-off"``"mic-vocal"``"mic-2"``"mic"``"microchip"``"microscope"``"microwave"``"milestone"``"milk-off"``"milk"``"minimize-2"``"minimize"``"minus"``"monitor-check"``"monitor-cloud"``"monitor-cog"``"monitor-dot"``"monitor-down"``"monitor-off"``"monitor-pause"``"monitor-play"``"monitor-smartphone"``"monitor-speaker"``"monitor-stop"``"monitor-up"``"monitor-x"``"monitor"``"moon-star"``"moon"``"motorbike"``"mountain-snow"``"mountain"``"mouse-off"``"mouse-pointer-2-off"``"mouse-pointer-2"``"mouse-pointer-ban"``"mouse-pointer-click"``"mouse-pointer"``"mouse"``"move-3d"``"move-3-d"``"move-diagonal-2"``"move-diagonal"``"move-down-left"``"move-down-right"``"move-down"``"move-horizontal"``"move-left"``"move-right"``"move-up-left"``"move-up-right"``"move-up"``"move-vertical"``"move"``"music-2"``"music-3"``"music-4"``"music"``"navigation-2-off"``"navigation-2"``"navigation-off"``"navigation"``"network"``"newspaper"``"nfc"``"non-binary"``"notebook-pen"``"notebook-tabs"``"notebook-text"``"notebook"``"notepad-text-dashed"``"notepad-text"``"nut-off"``"nut"``"octagon-alert"``"alert-octagon"``"octagon-minus"``"octagon-pause"``"pause-octagon"``"octagon-x"``"x-octagon"``"octagon"``"omega"``"orbit"``"origami"``"package-2"``"package-check"``"package-minus"``"package-open"``"package-plus"``"package-search"``"package-x"``"package"``"paint-bucket"``"paint-roller"``"paintbrush-vertical"``"paintbrush-2"``"paintbrush"``"palette"``"panda"``"panel-bottom-close"``"panel-bottom-dashed"``"panel-bottom-inactive"``"panel-bottom-open"``"panel-bottom"``"panel-left-close"``"sidebar-close"``"panel-left-dashed"``"panel-left-inactive"``"panel-left-open"``"sidebar-open"``"panel-left-right-dashed"``"panel-left"``"sidebar"``"panel-right-close"``"panel-right-dashed"``"panel-right-inactive"``"panel-right-open"``"panel-right"``"panel-top-bottom-dashed"``"panel-top-close"``"panel-top-dashed"``"panel-top-inactive"``"panel-top-open"``"panel-top"``"panels-left-bottom"``"panels-right-bottom"``"panels-top-left"``"layout"``"paperclip"``"parentheses"``"parking-meter"``"party-popper"``"pause"``"paw-print"``"pc-case"``"pen-line"``"edit-3"``"pen-off"``"pen-tool"``"pen"``"edit-2"``"pencil-line"``"pencil-off"``"pencil-ruler"``"pencil"``"pentagon"``"percent"``"person-standing"``"philippine-peso"``"phone-call"``"phone-forwarded"``"phone-incoming"``"phone-missed"``"phone-off"``"phone-outgoing"``"phone"``"pi"``"piano"``"pickaxe"``"picture-in-picture-2"``"picture-in-picture"``"piggy-bank"``"pilcrow-left"``"pilcrow-right"``"pilcrow"``"pill-bottle"``"pin-off"``"pin"``"pipette"``"pizza"``"plane-landing"``"plane-takeoff"``"plane"``"play"``"plug-2"``"plug-zap"``"plug-zap-2"``"plug"``"plus"``"pocket-knife"``"pocket"``"podcast"``"pointer-off"``"pointer"``"popcorn"``"popsicle"``"pound-sterling"``"power-off"``"power"``"presentation"``"printer-check"``"printer"``"projector"``"proportions"``"puzzle"``"pyramid"``"qr-code"``"quote"``"rabbit"``"radar"``"radiation"``"radical"``"radio-receiver"``"radio-tower"``"radio"``"radius"``"rail-symbol"``"rainbow"``"rat"``"receipt-cent"``"receipt-euro"``"receipt-indian-rupee"``"receipt-japanese-yen"``"receipt-pound-sterling"``"receipt-russian-ruble"``"receipt-swiss-franc"``"receipt-text"``"receipt-turkish-lira"``"receipt"``"rectangle-circle"``"rectangle-ellipsis"``"form-input"``"rectangle-goggles"``"rectangle-horizontal"``"rectangle-vertical"``"recycle"``"redo-2"``"redo-dot"``"redo"``"refresh-ccw-dot"``"refresh-ccw"``"refresh-cw-off"``"refresh-cw"``"refrigerator"``"regex"``"remove-formatting"``"repeat-1"``"repeat-2"``"replace-all"``"replace"``"reply-all"``"reply"``"rewind"``"ribbon"``"rocket"``"rocking-chair"``"roller-coaster"``"rose"``"rotate-3d"``"rotate-3-d"``"rotate-ccw-key"``"rotate-ccw-square"``"rotate-ccw"``"rotate-cw-square"``"rotate-cw"``"route-off"``"route"``"router"``"rows-2"``"rows-3"``"panels-top-bottom"``"rows-4"``"rss"``"ruler-dimension-line"``"ruler"``"russian-ruble"``"sailboat"``"salad"``"sandwich"``"satellite-dish"``"satellite"``"saudi-riyal"``"save-all"``"save-off"``"save"``"scale-3d"``"scale-3-d"``"scaling"``"scan-barcode"``"scan-eye"``"scan-face"``"scan-heart"``"scan-line"``"scan-qr-code"``"scan-search"``"scan-text"``"scan"``"school"``"scissors-line-dashed"``"scissors"``"scooter"``"screen-share-off"``"screen-share"``"scroll-text"``"search-alert"``"search-check"``"search-code"``"search-slash"``"search-x"``"send-horizontal"``"send-horizonal"``"send-to-back"``"send"``"separator-horizontal"``"separator-vertical"``"server-cog"``"server-crash"``"server-off"``"server"``"settings-2"``"settings"``"shapes"``"share-2"``"share"``"sheet"``"shell"``"shield-alert"``"shield-ban"``"shield-check"``"shield-ellipsis"``"shield-half"``"shield-minus"``"shield-off"``"shield-plus"``"shield-question-mark"``"shield-question"``"shield-user"``"shield-x"``"shield-close"``"shield"``"ship-wheel"``"ship"``"shirt"``"shopping-bag"``"shopping-basket"``"shopping-cart"``"shovel"``"shower-head"``"shredder"``"shrimp"``"shrink"``"shrub"``"shuffle"``"sigma"``"signal-high"``"signal-low"``"signal-medium"``"signal-zero"``"signal"``"signature"``"signpost-big"``"signpost"``"siren"``"skip-back"``"skip-forward"``"skull"``"slack"``"slash"``"slice"``"sliders-horizontal"``"sliders-vertical"``"sliders"``"smartphone-charging"``"smartphone-nfc"``"smartphone"``"smile-plus"``"smile"``"snail"``"snowflake"``"soap-dispenser-droplet"``"sofa"``"solar-panel"``"soup"``"spade"``"sparkle"``"sparkles"``"stars"``"speaker"``"speech"``"spell-check-2"``"spell-check"``"spline-pointer"``"spline"``"split"``"spool"``"spotlight"``"spray-can"``"sprout"``"square-activity"``"activity-square"``"square-arrow-down-left"``"arrow-down-left-square"``"square-arrow-down-right"``"arrow-down-right-square"``"square-arrow-down"``"arrow-down-square"``"square-arrow-left"``"arrow-left-square"``"square-arrow-out-down-left"``"arrow-down-left-from-square"``"square-arrow-out-down-right"``"arrow-down-right-from-square"``"square-arrow-out-up-left"``"arrow-up-left-from-square"``"square-arrow-out-up-right"``"arrow-up-right-from-square"``"square-arrow-right"``"arrow-right-square"``"square-arrow-up-left"``"arrow-up-left-square"``"square-arrow-up-right"``"arrow-up-right-square"``"square-arrow-up"``"arrow-up-square"``"square-asterisk"``"asterisk-square"``"square-bottom-dashed-scissors"``"scissors-square-dashed-bottom"``"square-chart-gantt"``"gantt-chart-square"``"square-gantt-chart"``"square-check-big"``"check-square"``"square-check"``"check-square-2"``"square-chevron-down"``"chevron-down-square"``"square-chevron-left"``"chevron-left-square"``"square-chevron-right"``"chevron-right-square"``"square-chevron-up"``"chevron-up-square"``"square-code"``"code-square"``"square-dashed-bottom-code"``"square-dashed-bottom"``"square-dashed-kanban"``"kanban-square-dashed"``"square-dashed-mouse-pointer"``"mouse-pointer-square-dashed"``"square-dashed-top-solid"``"square-dashed"``"box-select"``"square-divide"``"divide-square"``"square-dot"``"dot-square"``"square-equal"``"equal-square"``"square-function"``"function-square"``"square-kanban"``"kanban-square"``"square-library"``"library-square"``"square-m"``"m-square"``"square-menu"``"menu-square"``"square-minus"``"minus-square"``"square-mouse-pointer"``"inspect"``"square-parking-off"``"parking-square-off"``"square-parking"``"parking-square"``"square-pause"``"square-pen"``"pen-box"``"edit"``"pen-square"``"square-percent"``"percent-square"``"square-pi"``"pi-square"``"square-pilcrow"``"pilcrow-square"``"square-play"``"play-square"``"square-plus"``"plus-square"``"square-power"``"power-square"``"square-radical"``"square-round-corner"``"square-scissors"``"scissors-square"``"square-sigma"``"sigma-square"``"square-slash"``"slash-square"``"square-split-horizontal"``"split-square-horizontal"``"square-split-vertical"``"split-square-vertical"``"square-square"``"square-stack"``"square-star"``"square-stop"``"square-terminal"``"terminal-square"``"square-user-round"``"user-square-2"``"square-user"``"user-square"``"square-x"``"x-square"``"squares-exclude"``"squares-intersect"``"squares-subtract"``"squares-unite"``"squircle-dashed"``"squircle"``"squirrel"``"stamp"``"star-half"``"star-off"``"star"``"step-back"``"step-forward"``"stethoscope"``"sticker"``"sticky-note"``"stone"``"store"``"stretch-horizontal"``"stretch-vertical"``"strikethrough"``"subscript"``"sun-dim"``"sun-medium"``"sun-moon"``"sun-snow"``"sun"``"sunrise"``"sunset"``"superscript"``"swatch-book"``"swiss-franc"``"switch-camera"``"sword"``"swords"``"syringe"``"table-2"``"table-cells-merge"``"table-cells-split"``"table-columns-split"``"table-of-contents"``"table-properties"``"table-rows-split"``"tablet-smartphone"``"tablet"``"tablets"``"tag"``"tags"``"tally-1"``"tally-2"``"tally-3"``"tally-4"``"tally-5"``"tangent"``"telescope"``"tent-tree"``"tent"``"terminal"``"test-tube-diagonal"``"test-tube-2"``"test-tube"``"test-tubes"``"text-align-center"``"align-center"``"text-align-end"``"align-right"``"text-align-justify"``"align-justify"``"text-align-start"``"align-left"``"text-cursor-input"``"text-cursor"``"text-initial"``"letter-text"``"text-quote"``"text-search"``"text-select"``"text-selection"``"text-wrap"``"wrap-text"``"theater"``"thermometer-snowflake"``"thermometer-sun"``"thermometer"``"thumbs-down"``"thumbs-up"``"ticket-check"``"ticket-minus"``"ticket-percent"``"ticket-plus"``"ticket-slash"``"ticket-x"``"ticket"``"tickets-plane"``"tickets"``"timer-off"``"timer-reset"``"timer"``"toggle-left"``"toggle-right"``"toilet"``"tool-case"``"toolbox"``"tornado"``"torus"``"touchpad-off"``"touchpad"``"tower-control"``"toy-brick"``"tractor"``"traffic-cone"``"train-front-tunnel"``"train-front"``"train-track"``"tram-front"``"train"``"transgender"``"trash-2"``"trash"``"tree-deciduous"``"tree-palm"``"palmtree"``"tree-pine"``"trees"``"trello"``"trending-down"``"trending-up-down"``"trending-up"``"triangle-alert"``"alert-triangle"``"triangle-dashed"``"triangle-right"``"trophy"``"truck-electric"``"truck"``"turkish-lira"``"turntable"``"turtle"``"tv-minimal-play"``"tv-minimal"``"tv-2"``"tv"``"twitch"``"twitter"``"type-outline"``"umbrella-off"``"umbrella"``"undo-2"``"undo-dot"``"undo"``"unfold-horizontal"``"unfold-vertical"``"ungroup"``"university"``"school-2"``"unlink-2"``"unlink"``"unplug"``"upload"``"usb"``"user-check"``"user-cog"``"user-lock"``"user-minus"``"user-pen"``"user-plus"``"user-round-check"``"user-check-2"``"user-round-cog"``"user-cog-2"``"user-round-minus"``"user-minus-2"``"user-round-pen"``"user-round-plus"``"user-plus-2"``"user-round-search"``"user-round-x"``"user-x-2"``"user-round"``"user-2"``"user-search"``"user-star"``"user-x"``"user"``"users-round"``"users-2"``"users"``"utensils-crossed"``"fork-knife-crossed"``"utensils"``"fork-knife"``"utility-pole"``"van"``"variable"``"vault"``"vector-square"``"vegan"``"venetian-mask"``"venus-and-mars"``"venus"``"vibrate-off"``"vibrate"``"video-off"``"videotape"``"voicemail"``"volleyball"``"volume-1"``"volume-2"``"volume-off"``"volume-x"``"volume"``"vote"``"wallet-cards"``"wallet-minimal"``"wallet-2"``"wallet"``"wallpaper"``"wand-sparkles"``"wand-2"``"wand"``"warehouse"``"washing-machine"``"watch"``"waves-arrow-down"``"waves-arrow-up"``"waves-ladder"``"waves"``"waypoints"``"webcam"``"webhook-off"``"webhook"``"weight-tilde"``"weight"``"wheat-off"``"wheat"``"whole-word"``"wifi-cog"``"wifi-high"``"wifi-low"``"wifi-off"``"wifi-pen"``"wifi-sync"``"wifi-zero"``"wifi"``"wind-arrow-down"``"wind"``"wine-off"``"wine"``"workflow"``"worm"``"wrench"``"youtube"``"zap-off"``"zap"``"zoom-in"``"zoom-out"` | `'circle'` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L46) |
| `strokeWidth` | `string \| number` | `1` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<length-percentage> \| <number>` **Initial value**: `1px` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **1.5** \| **4** \| **≤15** \| No \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L47) |
| `size` | `string \| number` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L48) |
| `fallback` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Icon/Icon.tsx#L49) |

Common inherited styling props (7)

**Icon inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/IconPicker

@app-studio/components

# IconPicker

A dropdown component for selecting icons from a predefined list (Lucide icons).

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker.tsx)

## Import

```ts
import { IconPicker } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { IconPicker } from '@app-studio/components';

export const DefaultIconPicker = () => {
  const [icon, setIcon] = React.useState<any>('star');
  return (
    <Vertical gap={10} width="100%">
      <IconPicker
        label="Pick an icon"
        value={icon}
        onChange={(name) => setIcon(name)}
        helperText="Tap to open the icon grid"
      />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**IconPicker**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L6) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L8) |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L10) |
| `placeholder` | `string` | `'Select an icon'` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L12) |
| `helperText` | `string` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L14) |
| `value` | View type `"ratio" \| "target" \| "form" \| "rows" \| "list" \| "download" \| "blend" \| "type" \| "filter" \| "scale" \| "x" \| "columns" \| "container" \| "grid" \| "code" \| "link" \| "map" \| "menu" \| "option" \| "search" \| "section" \| "table" \| "video" \| "circle" \| "image" \| "text" \| "view" \| "square" \| "pill" \| "triangle" \| "repeat" \| "space" \| "scroll" \| "focus" \| "ghost" \| "files" \| "file" \| "underline" \| "dot" \| "donut" \| "a-arrow-down" \| "a-arrow-up" \| "a-large-small" \| "accessibility" \| "activity" \| "air-vent" \| "airplay" \| "alarm-clock-check" \| "alarm-check" \| "alarm-clock-minus" \| "alarm-minus" \| "alarm-clock-off" \| "alarm-clock-plus" \| "alarm-plus" \| "alarm-clock" \| "alarm-smoke" \| "album" \| "align-center-horizontal" \| "align-center-vertical" \| "align-end-horizontal" \| "align-end-vertical" \| "align-horizontal-distribute-center" \| "align-horizontal-distribute-end" \| "align-horizontal-distribute-start" \| "align-horizontal-justify-center" \| "align-horizontal-justify-end" \| "align-horizontal-justify-start" \| "align-horizontal-space-around" \| "align-horizontal-space-between" \| "align-start-horizontal" \| "align-start-vertical" \| "align-vertical-distribute-center" \| "align-vertical-distribute-end" \| "align-vertical-distribute-start" \| "align-vertical-justify-center" \| "align-vertical-justify-end" \| "align-vertical-justify-start" \| "align-vertical-space-around" \| "align-vertical-space-between" \| "ambulance" \| "ampersand" \| "ampersands" \| "amphora" \| "anchor" \| "angry" \| "annoyed" \| "antenna" \| "anvil" \| "aperture" \| "app-window-mac" \| "app-window" \| "apple" \| "archive-restore" \| "archive-x" \| "archive" \| "armchair" \| "arrow-big-down-dash" \| "arrow-big-down" \| "arrow-big-left-dash" \| "arrow-big-left" \| "arrow-big-right-dash" \| "arrow-big-right" \| "arrow-big-up-dash" \| "arrow-big-up" \| "arrow-down-0-1" \| "arrow-down-01" \| "arrow-down-1-0" \| "arrow-down-10" \| "arrow-down-a-z" \| "arrow-down-az" \| "arrow-down-from-line" \| "arrow-down-left" \| "arrow-down-narrow-wide" \| "arrow-down-right" \| "arrow-down-to-dot" \| "arrow-down-to-line" \| "arrow-down-up" \| "arrow-down-wide-narrow" \| "sort-desc" \| "arrow-down-z-a" \| "arrow-down-za" \| "arrow-down" \| "arrow-left-from-line" \| "arrow-left-right" \| "arrow-left-to-line" \| "arrow-left" \| "arrow-right-from-line" \| "arrow-right-left" \| "arrow-right-to-line" \| "arrow-right" \| "arrow-up-0-1" \| "arrow-up-01" \| "arrow-up-1-0" \| "arrow-up-10" \| "arrow-up-a-z" \| "arrow-up-az" \| "arrow-up-down" \| "arrow-up-from-dot" \| "arrow-up-from-line" \| "arrow-up-left" \| "arrow-up-narrow-wide" \| "sort-asc" \| "arrow-up-right" \| "arrow-up-to-line" \| "arrow-up-wide-narrow" \| "arrow-up-z-a" \| "arrow-up-za" \| "arrow-up" \| "arrows-up-from-line" \| "asterisk" \| "at-sign" \| "atom" \| "audio-lines" \| "audio-waveform" \| "award" \| "axe" \| "axis-3d" \| "axis-3-d" \| "baby" \| "backpack" \| "badge-alert" \| "badge-cent" \| "badge-check" \| "verified" \| "badge-dollar-sign" \| "badge-euro" \| "badge-indian-rupee" \| "badge-info" \| "badge-japanese-yen" \| "badge-minus" \| "badge-percent" \| "badge-plus" \| "badge-pound-sterling" \| "badge-question-mark" \| "badge-help" \| "badge-russian-ruble" \| "badge-swiss-franc" \| "badge-turkish-lira" \| "badge-x" \| "badge" \| "baggage-claim" \| "balloon" \| "ban" \| "banana" \| "bandage" \| "banknote-arrow-down" \| "banknote-arrow-up" \| "banknote-x" \| "banknote" \| "barcode" \| "barrel" \| "baseline" \| "bath" \| "battery-charging" \| "battery-full" \| "battery-low" \| "battery-medium" \| "battery-plus" \| "battery-warning" \| "battery" \| "beaker" \| "bean-off" \| "bean" \| "bed-double" \| "bed-single" \| "bed" \| "beef" \| "beer-off" \| "beer" \| "bell-dot" \| "bell-electric" \| "bell-minus" \| "bell-off" \| "bell-plus" \| "bell-ring" \| "bell" \| "between-horizontal-end" \| "between-horizonal-end" \| "between-horizontal-start" \| "between-horizonal-start" \| "between-vertical-end" \| "between-vertical-start" \| "biceps-flexed" \| "bike" \| "binary" \| "binoculars" \| "biohazard" \| "bird" \| "birdhouse" \| "bitcoin" \| "blinds" \| "blocks" \| "bluetooth-connected" \| "bluetooth-off" \| "bluetooth-searching" \| "bluetooth" \| "bold" \| "bolt" \| "bomb" \| "bone" \| "book-a" \| "book-alert" \| "book-audio" \| "book-check" \| "book-copy" \| "book-dashed" \| "book-template" \| "book-down" \| "book-headphones" \| "book-heart" \| "book-image" \| "book-key" \| "book-lock" \| "book-marked" \| "book-minus" \| "book-open-check" \| "book-open-text" \| "book-open" \| "book-plus" \| "book-search" \| "book-text" \| "book-type" \| "book-up-2" \| "book-up" \| "book-user" \| "book-x" \| "book" \| "bookmark-check" \| "bookmark-minus" \| "bookmark-plus" \| "bookmark-x" \| "bookmark" \| "boom-box" \| "bot-message-square" \| "bot-off" \| "bot" \| "bottle-wine" \| "bow-arrow" \| "box" \| "boxes" \| "braces" \| "curly-braces" \| "brackets" \| "brain-circuit" \| "brain-cog" \| "brain" \| "brick-wall-fire" \| "brick-wall-shield" \| "brick-wall" \| "briefcase-business" \| "briefcase-conveyor-belt" \| "briefcase-medical" \| "briefcase" \| "bring-to-front" \| "brush-cleaning" \| "brush" \| "bubbles" \| "bug-off" \| "bug-play" \| "bug" \| "building-2" \| "building" \| "bus-front" \| "bus" \| "cable-car" \| "cable" \| "cake-slice" \| "cake" \| "calculator" \| "calendar-1" \| "calendar-arrow-down" \| "calendar-arrow-up" \| "calendar-check-2" \| "calendar-check" \| "calendar-clock" \| "calendar-cog" \| "calendar-days" \| "calendar-fold" \| "calendar-heart" \| "calendar-minus-2" \| "calendar-minus" \| "calendar-off" \| "calendar-plus-2" \| "calendar-plus" \| "calendar-range" \| "calendar-search" \| "calendar-sync" \| "calendar-x-2" \| "calendar-x" \| "calendar" \| "calendars" \| "camera-off" \| "camera" \| "candy-cane" \| "candy-off" \| "candy" \| "cannabis-off" \| "cannabis" \| "captions-off" \| "captions" \| "subtitles" \| "car-front" \| "car-taxi-front" \| "car" \| "caravan" \| "card-sim" \| "carrot" \| "case-lower" \| "case-sensitive" \| "case-upper" \| "cassette-tape" \| "cast" \| "castle" \| "cat" \| "cctv" \| "chart-area" \| "area-chart" \| "chart-bar-big" \| "bar-chart-horizontal-big" \| "chart-bar-decreasing" \| "chart-bar-increasing" \| "chart-bar-stacked" \| "chart-bar" \| "bar-chart-horizontal" \| "chart-candlestick" \| "candlestick-chart" \| "chart-column-big" \| "bar-chart-big" \| "chart-column-decreasing" \| "chart-column-increasing" \| "bar-chart-4" \| "chart-column-stacked" \| "chart-column" \| "bar-chart-3" \| "chart-gantt" \| "chart-line" \| "line-chart" \| "chart-network" \| "chart-no-axes-column-decreasing" \| "chart-no-axes-column-increasing" \| "bar-chart" \| "chart-no-axes-column" \| "bar-chart-2" \| "chart-no-axes-combined" \| "chart-no-axes-gantt" \| "gantt-chart" \| "chart-pie" \| "pie-chart" \| "chart-scatter" \| "scatter-chart" \| "chart-spline" \| "check-check" \| "check-line" \| "check" \| "chef-hat" \| "cherry" \| "chess-bishop" \| "chess-king" \| "chess-knight" \| "chess-pawn" \| "chess-queen" \| "chess-rook" \| "chevron-down" \| "chevron-first" \| "chevron-last" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "chevrons-down-up" \| "chevrons-down" \| "chevrons-left-right-ellipsis" \| "chevrons-left-right" \| "chevrons-left" \| "chevrons-right-left" \| "chevrons-right" \| "chevrons-up-down" \| "chevrons-up" \| "chromium" \| "chrome" \| "church" \| "cigarette-off" \| "cigarette" \| "circle-alert" \| "alert-circle" \| "circle-arrow-down" \| "arrow-down-circle" \| "circle-arrow-left" \| "arrow-left-circle" \| "circle-arrow-out-down-left" \| "arrow-down-left-from-circle" \| "circle-arrow-out-down-right" \| "arrow-down-right-from-circle" \| "circle-arrow-out-up-left" \| "arrow-up-left-from-circle" \| "circle-arrow-out-up-right" \| "arrow-up-right-from-circle" \| "circle-arrow-right" \| "arrow-right-circle" \| "circle-arrow-up" \| "arrow-up-circle" \| "circle-check-big" \| "check-circle" \| "circle-check" \| "check-circle-2" \| "circle-chevron-down" \| "chevron-down-circle" \| "circle-chevron-left" \| "chevron-left-circle" \| "circle-chevron-right" \| "chevron-right-circle" \| "circle-chevron-up" \| "chevron-up-circle" \| "circle-dashed" \| "circle-divide" \| "divide-circle" \| "circle-dollar-sign" \| "circle-dot-dashed" \| "circle-dot" \| "circle-ellipsis" \| "circle-equal" \| "circle-fading-arrow-up" \| "circle-fading-plus" \| "circle-gauge" \| "gauge-circle" \| "circle-minus" \| "minus-circle" \| "circle-off" \| "circle-parking-off" \| "parking-circle-off" \| "circle-parking" \| "parking-circle" \| "circle-pause" \| "pause-circle" \| "circle-percent" \| "percent-circle" \| "circle-pile" \| "circle-play" \| "play-circle" \| "circle-plus" \| "plus-circle" \| "circle-pound-sterling" \| "circle-power" \| "power-circle" \| "circle-question-mark" \| "help-circle" \| "circle-help" \| "circle-slash-2" \| "circle-slashed" \| "circle-slash" \| "circle-small" \| "circle-star" \| "circle-stop" \| "stop-circle" \| "circle-user-round" \| "user-circle-2" \| "circle-user" \| "user-circle" \| "circle-x" \| "x-circle" \| "circuit-board" \| "citrus" \| "clapperboard" \| "clipboard-check" \| "clipboard-clock" \| "clipboard-copy" \| "clipboard-list" \| "clipboard-minus" \| "clipboard-paste" \| "clipboard-pen-line" \| "clipboard-signature" \| "clipboard-pen" \| "clipboard-edit" \| "clipboard-plus" \| "clipboard-type" \| "clipboard-x" \| "clipboard" \| "clock-1" \| "clock-10" \| "clock-11" \| "clock-12" \| "clock-2" \| "clock-3" \| "clock-4" \| "clock-5" \| "clock-6" \| "clock-7" \| "clock-8" \| "clock-9" \| "clock-alert" \| "clock-arrow-down" \| "clock-arrow-up" \| "clock-check" \| "clock-fading" \| "clock-plus" \| "clock" \| "closed-caption" \| "cloud-alert" \| "cloud-backup" \| "cloud-check" \| "cloud-cog" \| "cloud-download" \| "download-cloud" \| "cloud-drizzle" \| "cloud-fog" \| "cloud-hail" \| "cloud-lightning" \| "cloud-moon-rain" \| "cloud-moon" \| "cloud-off" \| "cloud-rain-wind" \| "cloud-rain" \| "cloud-snow" \| "cloud-sun-rain" \| "cloud-sun" \| "cloud-sync" \| "cloud-upload" \| "upload-cloud" \| "cloud" \| "cloudy" \| "clover" \| "club" \| "code-xml" \| "code-2" \| "codepen" \| "codesandbox" \| "coffee" \| "cog" \| "coins" \| "columns-2" \| "columns-3-cog" \| "columns-settings" \| "table-config" \| "columns-3" \| "panels-left-right" \| "columns-4" \| "combine" \| "command" \| "compass" \| "component" \| "computer" \| "concierge-bell" \| "cone" \| "construction" \| "contact-round" \| "contact-2" \| "contact" \| "contrast" \| "cookie" \| "cooking-pot" \| "copy-check" \| "copy-minus" \| "copy-plus" \| "copy-slash" \| "copy-x" \| "copy" \| "copyleft" \| "copyright" \| "corner-down-left" \| "corner-down-right" \| "corner-left-down" \| "corner-left-up" \| "corner-right-down" \| "corner-right-up" \| "corner-up-left" \| "corner-up-right" \| "cpu" \| "creative-commons" \| "credit-card" \| "croissant" \| "crop" \| "cross" \| "crosshair" \| "crown" \| "cuboid" \| "cup-soda" \| "currency" \| "cylinder" \| "dam" \| "database-backup" \| "database-zap" \| "database" \| "decimals-arrow-left" \| "decimals-arrow-right" \| "delete" \| "dessert" \| "diameter" \| "diamond-minus" \| "diamond-percent" \| "percent-diamond" \| "diamond-plus" \| "diamond" \| "dice-1" \| "dice-2" \| "dice-3" \| "dice-4" \| "dice-5" \| "dice-6" \| "dices" \| "diff" \| "disc-2" \| "disc-3" \| "disc-album" \| "disc" \| "divide" \| "dna-off" \| "dna" \| "dock" \| "dog" \| "dollar-sign" \| "door-closed-locked" \| "door-closed" \| "door-open" \| "drafting-compass" \| "drama" \| "dribbble" \| "drill" \| "drone" \| "droplet-off" \| "droplet" \| "droplets" \| "drum" \| "drumstick" \| "dumbbell" \| "ear-off" \| "ear" \| "earth-lock" \| "earth" \| "globe-2" \| "eclipse" \| "egg-fried" \| "egg-off" \| "egg" \| "ellipsis-vertical" \| "more-vertical" \| "ellipsis" \| "more-horizontal" \| "equal-approximately" \| "equal-not" \| "equal" \| "eraser" \| "ethernet-port" \| "euro" \| "ev-charger" \| "expand" \| "external-link" \| "eye-closed" \| "eye-off" \| "eye" \| "facebook" \| "factory" \| "fan" \| "fast-forward" \| "feather" \| "fence" \| "ferris-wheel" \| "figma" \| "file-archive" \| "file-axis-3d" \| "file-axis-3-d" \| "file-badge" \| "file-badge-2" \| "file-box" \| "file-braces-corner" \| "file-json-2" \| "file-braces" \| "file-json" \| "file-chart-column-increasing" \| "file-bar-chart" \| "file-chart-column" \| "file-bar-chart-2" \| "file-chart-line" \| "file-line-chart" \| "file-chart-pie" \| "file-pie-chart" \| "file-check-corner" \| "file-check-2" \| "file-check" \| "file-clock" \| "file-code-corner" \| "file-code-2" \| "file-code" \| "file-cog" \| "file-cog-2" \| "file-diff" \| "file-digit" \| "file-down" \| "file-exclamation-point" \| "file-warning" \| "file-headphone" \| "file-audio" \| "file-audio-2" \| "file-heart" \| "file-image" \| "file-input" \| "file-key" \| "file-key-2" \| "file-lock" \| "file-lock-2" \| "file-minus-corner" \| "file-minus-2" \| "file-minus" \| "file-music" \| "file-output" \| "file-pen-line" \| "file-signature" \| "file-pen" \| "file-edit" \| "file-play" \| "file-video" \| "file-plus-corner" \| "file-plus-2" \| "file-plus" \| "file-question-mark" \| "file-question" \| "file-scan" \| "file-search-corner" \| "file-search-2" \| "file-search" \| "file-signal" \| "file-volume-2" \| "file-sliders" \| "file-spreadsheet" \| "file-stack" \| "file-symlink" \| "file-terminal" \| "file-text" \| "file-type-corner" \| "file-type-2" \| "file-type" \| "file-up" \| "file-user" \| "file-video-camera" \| "file-video-2" \| "file-volume" \| "file-x-corner" \| "file-x-2" \| "file-x" \| "film" \| "fingerprint-pattern" \| "fingerprint" \| "fire-extinguisher" \| "fish-off" \| "fish-symbol" \| "fish" \| "fishing-hook" \| "flag-off" \| "flag-triangle-left" \| "flag-triangle-right" \| "flag" \| "flame-kindling" \| "flame" \| "flashlight-off" \| "flashlight" \| "flask-conical-off" \| "flask-conical" \| "flask-round" \| "flip-horizontal-2" \| "flip-horizontal" \| "flip-vertical-2" \| "flip-vertical" \| "flower-2" \| "flower" \| "fold-horizontal" \| "fold-vertical" \| "folder-archive" \| "folder-check" \| "folder-clock" \| "folder-closed" \| "folder-code" \| "folder-cog" \| "folder-cog-2" \| "folder-dot" \| "folder-down" \| "folder-git-2" \| "folder-git" \| "folder-heart" \| "folder-input" \| "folder-kanban" \| "folder-key" \| "folder-lock" \| "folder-minus" \| "folder-open-dot" \| "folder-open" \| "folder-output" \| "folder-pen" \| "folder-edit" \| "folder-plus" \| "folder-root" \| "folder-search-2" \| "folder-search" \| "folder-symlink" \| "folder-sync" \| "folder-tree" \| "folder-up" \| "folder-x" \| "folder" \| "folders" \| "footprints" \| "forklift" \| "forward" \| "frame" \| "framer" \| "frown" \| "fuel" \| "fullscreen" \| "funnel-plus" \| "funnel-x" \| "filter-x" \| "funnel" \| "gallery-horizontal-end" \| "gallery-horizontal" \| "gallery-thumbnails" \| "gallery-vertical-end" \| "gallery-vertical" \| "gamepad-2" \| "gamepad-directional" \| "gamepad" \| "gauge" \| "gavel" \| "gem" \| "georgian-lari" \| "gift" \| "git-branch-minus" \| "git-branch-plus" \| "git-branch" \| "git-commit-horizontal" \| "git-commit" \| "git-commit-vertical" \| "git-compare-arrows" \| "git-compare" \| "git-fork" \| "git-graph" \| "git-merge" \| "git-pull-request-arrow" \| "git-pull-request-closed" \| "git-pull-request-create-arrow" \| "git-pull-request-create" \| "git-pull-request-draft" \| "git-pull-request" \| "github" \| "gitlab" \| "glass-water" \| "glasses" \| "globe-lock" \| "globe" \| "goal" \| "gpu" \| "graduation-cap" \| "grape" \| "grid-2x2-check" \| "grid-2-x-2-check" \| "grid-2x2-plus" \| "grid-2-x-2-plus" \| "grid-2x2-x" \| "grid-2-x-2-x" \| "grid-2x2" \| "grid-2-x-2" \| "grid-3x2" \| "grid-3x3" \| "grid-3-x-3" \| "grip-horizontal" \| "grip-vertical" \| "grip" \| "group" \| "guitar" \| "ham" \| "hamburger" \| "hammer" \| "hand-coins" \| "hand-fist" \| "hand-grab" \| "grab" \| "hand-heart" \| "hand-helping" \| "helping-hand" \| "hand-metal" \| "hand-platter" \| "hand" \| "handbag" \| "handshake" \| "hard-drive-download" \| "hard-drive-upload" \| "hard-drive" \| "hard-hat" \| "hash" \| "hat-glasses" \| "haze" \| "hd" \| "hdmi-port" \| "heading-1" \| "heading-2" \| "heading-3" \| "heading-4" \| "heading-5" \| "heading-6" \| "heading" \| "headphone-off" \| "headphones" \| "headset" \| "heart-crack" \| "heart-handshake" \| "heart-minus" \| "heart-off" \| "heart-plus" \| "heart-pulse" \| "heart" \| "heater" \| "helicopter" \| "hexagon" \| "highlighter" \| "history" \| "hop-off" \| "hop" \| "hospital" \| "hotel" \| "hourglass" \| "house-heart" \| "house-plug" \| "house-plus" \| "house-wifi" \| "house" \| "home" \| "ice-cream-bowl" \| "ice-cream-2" \| "ice-cream-cone" \| "ice-cream" \| "id-card-lanyard" \| "id-card" \| "image-down" \| "image-minus" \| "image-off" \| "image-play" \| "image-plus" \| "image-up" \| "image-upscale" \| "images" \| "import" \| "inbox" \| "indian-rupee" \| "infinity" \| "info" \| "inspection-panel" \| "instagram" \| "italic" \| "iteration-ccw" \| "iteration-cw" \| "japanese-yen" \| "joystick" \| "kanban" \| "kayak" \| "key-round" \| "key-square" \| "key" \| "keyboard-music" \| "keyboard-off" \| "keyboard" \| "lamp-ceiling" \| "lamp-desk" \| "lamp-floor" \| "lamp-wall-down" \| "lamp-wall-up" \| "lamp" \| "land-plot" \| "landmark" \| "languages" \| "laptop-minimal-check" \| "laptop-minimal" \| "laptop-2" \| "laptop" \| "lasso-select" \| "lasso" \| "laugh" \| "layers-2" \| "layers-plus" \| "layers" \| "layers-3" \| "layout-dashboard" \| "layout-grid" \| "layout-list" \| "layout-panel-left" \| "layout-panel-top" \| "layout-template" \| "leaf" \| "leafy-green" \| "lectern" \| "library-big" \| "library" \| "life-buoy" \| "ligature" \| "lightbulb-off" \| "lightbulb" \| "line-squiggle" \| "link-2-off" \| "link-2" \| "linkedin" \| "list-check" \| "list-checks" \| "list-chevrons-down-up" \| "list-chevrons-up-down" \| "list-collapse" \| "list-end" \| "list-filter-plus" \| "list-filter" \| "list-indent-decrease" \| "outdent" \| "indent-decrease" \| "list-indent-increase" \| "indent" \| "indent-increase" \| "list-minus" \| "list-music" \| "list-ordered" \| "list-plus" \| "list-restart" \| "list-start" \| "list-todo" \| "list-tree" \| "list-video" \| "list-x" \| "loader-circle" \| "loader-2" \| "loader-pinwheel" \| "loader" \| "locate-fixed" \| "locate-off" \| "locate" \| "lock-keyhole-open" \| "unlock-keyhole" \| "lock-keyhole" \| "lock-open" \| "unlock" \| "lock" \| "log-in" \| "log-out" \| "logs" \| "lollipop" \| "luggage" \| "magnet" \| "mail-check" \| "mail-minus" \| "mail-open" \| "mail-plus" \| "mail-question-mark" \| "mail-question" \| "mail-search" \| "mail-warning" \| "mail-x" \| "mail" \| "mailbox" \| "mails" \| "map-minus" \| "map-pin-check-inside" \| "map-pin-check" \| "map-pin-house" \| "map-pin-minus-inside" \| "map-pin-minus" \| "map-pin-off" \| "map-pin-pen" \| "location-edit" \| "map-pin-plus-inside" \| "map-pin-plus" \| "map-pin-x-inside" \| "map-pin-x" \| "map-pin" \| "map-pinned" \| "map-plus" \| "mars-stroke" \| "mars" \| "martini" \| "maximize-2" \| "maximize" \| "medal" \| "megaphone-off" \| "megaphone" \| "meh" \| "memory-stick" \| "merge" \| "message-circle-code" \| "message-circle-dashed" \| "message-circle-heart" \| "message-circle-more" \| "message-circle-off" \| "message-circle-plus" \| "message-circle-question-mark" \| "message-circle-question" \| "message-circle-reply" \| "message-circle-warning" \| "message-circle-x" \| "message-circle" \| "message-square-code" \| "message-square-dashed" \| "message-square-diff" \| "message-square-dot" \| "message-square-heart" \| "message-square-lock" \| "message-square-more" \| "message-square-off" \| "message-square-plus" \| "message-square-quote" \| "message-square-reply" \| "message-square-share" \| "message-square-text" \| "message-square-warning" \| "message-square-x" \| "message-square" \| "messages-square" \| "mic-off" \| "mic-vocal" \| "mic-2" \| "mic" \| "microchip" \| "microscope" \| "microwave" \| "milestone" \| "milk-off" \| "milk" \| "minimize-2" \| "minimize" \| "minus" \| "monitor-check" \| "monitor-cloud" \| "monitor-cog" \| "monitor-dot" \| "monitor-down" \| "monitor-off" \| "monitor-pause" \| "monitor-play" \| "monitor-smartphone" \| "monitor-speaker" \| "monitor-stop" \| "monitor-up" \| "monitor-x" \| "monitor" \| "moon-star" \| "moon" \| "motorbike" \| "mountain-snow" \| "mountain" \| "mouse-off" \| "mouse-pointer-2-off" \| "mouse-pointer-2" \| "mouse-pointer-ban" \| "mouse-pointer-click" \| "mouse-pointer" \| "mouse" \| "move-3d" \| "move-3-d" \| "move-diagonal-2" \| "move-diagonal" \| "move-down-left" \| "move-down-right" \| "move-down" \| "move-horizontal" \| "move-left" \| "move-right" \| "move-up-left" \| "move-up-right" \| "move-up" \| "move-vertical" \| "move" \| "music-2" \| "music-3" \| "music-4" \| "music" \| "navigation-2-off" \| "navigation-2" \| "navigation-off" \| "navigation" \| "network" \| "newspaper" \| "nfc" \| "non-binary" \| "notebook-pen" \| "notebook-tabs" \| "notebook-text" \| "notebook" \| "notepad-text-dashed" \| "notepad-text" \| "nut-off" \| "nut" \| "octagon-alert" \| "alert-octagon" \| "octagon-minus" \| "octagon-pause" \| "pause-octagon" \| "octagon-x" \| "x-octagon" \| "octagon" \| "omega" \| "orbit" \| "origami" \| "package-2" \| "package-check" \| "package-minus" \| "package-open" \| "package-plus" \| "package-search" \| "package-x" \| "package" \| "paint-bucket" \| "paint-roller" \| "paintbrush-vertical" \| "paintbrush-2" \| "paintbrush" \| "palette" \| "panda" \| "panel-bottom-close" \| "panel-bottom-dashed" \| "panel-bottom-inactive" \| "panel-bottom-open" \| "panel-bottom" \| "panel-left-close" \| "sidebar-close" \| "panel-left-dashed" \| "panel-left-inactive" \| "panel-left-open" \| "sidebar-open" \| "panel-left-right-dashed" \| "panel-left" \| "sidebar" \| "panel-right-close" \| "panel-right-dashed" \| "panel-right-inactive" \| "panel-right-open" \| "panel-right" \| "panel-top-bottom-dashed" \| "panel-top-close" \| "panel-top-dashed" \| "panel-top-inactive" \| "panel-top-open" \| "panel-top" \| "panels-left-bottom" \| "panels-right-bottom" \| "panels-top-left" \| "layout" \| "paperclip" \| "parentheses" \| "parking-meter" \| "party-popper" \| "pause" \| "paw-print" \| "pc-case" \| "pen-line" \| "edit-3" \| "pen-off" \| "pen-tool" \| "pen" \| "edit-2" \| "pencil-line" \| "pencil-off" \| "pencil-ruler" \| "pencil" \| "pentagon" \| "percent" \| "person-standing" \| "philippine-peso" \| "phone-call" \| "phone-forwarded" \| "phone-incoming" \| "phone-missed" \| "phone-off" \| "phone-outgoing" \| "phone" \| "pi" \| "piano" \| "pickaxe" \| "picture-in-picture-2" \| "picture-in-picture" \| "piggy-bank" \| "pilcrow-left" \| "pilcrow-right" \| "pilcrow" \| "pill-bottle" \| "pin-off" \| "pin" \| "pipette" \| "pizza" \| "plane-landing" \| "plane-takeoff" \| "plane" \| "play" \| "plug-2" \| "plug-zap" \| "plug-zap-2" \| "plug" \| "plus" \| "pocket-knife" \| "pocket" \| "podcast" \| "pointer-off" \| "pointer" \| "popcorn" \| "popsicle" \| "pound-sterling" \| "power-off" \| "power" \| "presentation" \| "printer-check" \| "printer" \| "projector" \| "proportions" \| "puzzle" \| "pyramid" \| "qr-code" \| "quote" \| "rabbit" \| "radar" \| "radiation" \| "radical" \| "radio-receiver" \| "radio-tower" \| "radio" \| "radius" \| "rail-symbol" \| "rainbow" \| "rat" \| "receipt-cent" \| "receipt-euro" \| "receipt-indian-rupee" \| "receipt-japanese-yen" \| "receipt-pound-sterling" \| "receipt-russian-ruble" \| "receipt-swiss-franc" \| "receipt-text" \| "receipt-turkish-lira" \| "receipt" \| "rectangle-circle" \| "rectangle-ellipsis" \| "form-input" \| "rectangle-goggles" \| "rectangle-horizontal" \| "rectangle-vertical" \| "recycle" \| "redo-2" \| "redo-dot" \| "redo" \| "refresh-ccw-dot" \| "refresh-ccw" \| "refresh-cw-off" \| "refresh-cw" \| "refrigerator" \| "regex" \| "remove-formatting" \| "repeat-1" \| "repeat-2" \| "replace-all" \| "replace" \| "reply-all" \| "reply" \| "rewind" \| "ribbon" \| "rocket" \| "rocking-chair" \| "roller-coaster" \| "rose" \| "rotate-3d" \| "rotate-3-d" \| "rotate-ccw-key" \| "rotate-ccw-square" \| "rotate-ccw" \| "rotate-cw-square" \| "rotate-cw" \| "route-off" \| "route" \| "router" \| "rows-2" \| "rows-3" \| "panels-top-bottom" \| "rows-4" \| "rss" \| "ruler-dimension-line" \| "ruler" \| "russian-ruble" \| "sailboat" \| "salad" \| "sandwich" \| "satellite-dish" \| "satellite" \| "saudi-riyal" \| "save-all" \| "save-off" \| "save" \| "scale-3d" \| "scale-3-d" \| "scaling" \| "scan-barcode" \| "scan-eye" \| "scan-face" \| "scan-heart" \| "scan-line" \| "scan-qr-code" \| "scan-search" \| "scan-text" \| "scan" \| "school" \| "scissors-line-dashed" \| "scissors" \| "scooter" \| "screen-share-off" \| "screen-share" \| "scroll-text" \| "search-alert" \| "search-check" \| "search-code" \| "search-slash" \| "search-x" \| "send-horizontal" \| "send-horizonal" \| "send-to-back" \| "send" \| "separator-horizontal" \| "separator-vertical" \| "server-cog" \| "server-crash" \| "server-off" \| "server" \| "settings-2" \| "settings" \| "shapes" \| "share-2" \| "share" \| "sheet" \| "shell" \| "shield-alert" \| "shield-ban" \| "shield-check" \| "shield-ellipsis" \| "shield-half" \| "shield-minus" \| "shield-off" \| "shield-plus" \| "shield-question-mark" \| "shield-question" \| "shield-user" \| "shield-x" \| "shield-close" \| "shield" \| "ship-wheel" \| "ship" \| "shirt" \| "shopping-bag" \| "shopping-basket" \| "shopping-cart" \| "shovel" \| "shower-head" \| "shredder" \| "shrimp" \| "shrink" \| "shrub" \| "shuffle" \| "sigma" \| "signal-high" \| "signal-low" \| "signal-medium" \| "signal-zero" \| "signal" \| "signature" \| "signpost-big" \| "signpost" \| "siren" \| "skip-back" \| "skip-forward" \| "skull" \| "slack" \| "slash" \| "slice" \| "sliders-horizontal" \| "sliders-vertical" \| "sliders" \| "smartphone-charging" \| "smartphone-nfc" \| "smartphone" \| "smile-plus" \| "smile" \| "snail" \| "snowflake" \| "soap-dispenser-droplet" \| "sofa" \| "solar-panel" \| "soup" \| "spade" \| "sparkle" \| "sparkles" \| "stars" \| "speaker" \| "speech" \| "spell-check-2" \| "spell-check" \| "spline-pointer" \| "spline" \| "split" \| "spool" \| "spotlight" \| "spray-can" \| "sprout" \| "square-activity" \| "activity-square" \| "square-arrow-down-left" \| "arrow-down-left-square" \| "square-arrow-down-right" \| "arrow-down-right-square" \| "square-arrow-down" \| "arrow-down-square" \| "square-arrow-left" \| "arrow-left-square" \| "square-arrow-out-down-left" \| "arrow-down-left-from-square" \| "square-arrow-out-down-right" \| "arrow-down-right-from-square" \| "square-arrow-out-up-left" \| "arrow-up-left-from-square" \| "square-arrow-out-up-right" \| "arrow-up-right-from-square" \| "square-arrow-right" \| "arrow-right-square" \| "square-arrow-up-left" \| "arrow-up-left-square" \| "square-arrow-up-right" \| "arrow-up-right-square" \| "square-arrow-up" \| "arrow-up-square" \| "square-asterisk" \| "asterisk-square" \| "square-bottom-dashed-scissors" \| "scissors-square-dashed-bottom" \| "square-chart-gantt" \| "gantt-chart-square" \| "square-gantt-chart" \| "square-check-big" \| "check-square" \| "square-check" \| "check-square-2" \| "square-chevron-down" \| "chevron-down-square" \| "square-chevron-left" \| "chevron-left-square" \| "square-chevron-right" \| "chevron-right-square" \| "square-chevron-up" \| "chevron-up-square" \| "square-code" \| "code-square" \| "square-dashed-bottom-code" \| "square-dashed-bottom" \| "square-dashed-kanban" \| "kanban-square-dashed" \| "square-dashed-mouse-pointer" \| "mouse-pointer-square-dashed" \| "square-dashed-top-solid" \| "square-dashed" \| "box-select" \| "square-divide" \| "divide-square" \| "square-dot" \| "dot-square" \| "square-equal" \| "equal-square" \| "square-function" \| "function-square" \| "square-kanban" \| "kanban-square" \| "square-library" \| "library-square" \| "square-m" \| "m-square" \| "square-menu" \| "menu-square" \| "square-minus" \| "minus-square" \| "square-mouse-pointer" \| "inspect" \| "square-parking-off" \| "parking-square-off" \| "square-parking" \| "parking-square" \| "square-pause" \| "square-pen" \| "pen-box" \| "edit" \| "pen-square" \| "square-percent" \| "percent-square" \| "square-pi" \| "pi-square" \| "square-pilcrow" \| "pilcrow-square" \| "square-play" \| "play-square" \| "square-plus" \| "plus-square" \| "square-power" \| "power-square" \| "square-radical" \| "square-round-corner" \| "square-scissors" \| "scissors-square" \| "square-sigma" \| "sigma-square" \| "square-slash" \| "slash-square" \| "square-split-horizontal" \| "split-square-horizontal" \| "square-split-vertical" \| "split-square-vertical" \| "square-square" \| "square-stack" \| "square-star" \| "square-stop" \| "square-terminal" \| "terminal-square" \| "square-user-round" \| "user-square-2" \| "square-user" \| "user-square" \| "square-x" \| "x-square" \| "squares-exclude" \| "squares-intersect" \| "squares-subtract" \| "squares-unite" \| "squircle-dashed" \| "squircle" \| "squirrel" \| "stamp" \| "star-half" \| "star-off" \| "star" \| "step-back" \| "step-forward" \| "stethoscope" \| "sticker" \| "sticky-note" \| "stone" \| "store" \| "stretch-horizontal" \| "stretch-vertical" \| "strikethrough" \| "subscript" \| "sun-dim" \| "sun-medium" \| "sun-moon" \| "sun-snow" \| "sun" \| "sunrise" \| "sunset" \| "superscript" \| "swatch-book" \| "swiss-franc" \| "switch-camera" \| "sword" \| "swords" \| "syringe" \| "table-2" \| "table-cells-merge" \| "table-cells-split" \| "table-columns-split" \| "table-of-contents" \| "table-properties" \| "table-rows-split" \| "tablet-smartphone" \| "tablet" \| "tablets" \| "tag" \| "tags" \| "tally-1" \| "tally-2" \| "tally-3" \| "tally-4" \| "tally-5" \| "tangent" \| "telescope" \| "tent-tree" \| "tent" \| "terminal" \| "test-tube-diagonal" \| "test-tube-2" \| "test-tube" \| "test-tubes" \| "text-align-center" \| "align-center" \| "text-align-end" \| "align-right" \| "text-align-justify" \| "align-justify" \| "text-align-start" \| "align-left" \| "text-cursor-input" \| "text-cursor" \| "text-initial" \| "letter-text" \| "text-quote" \| "text-search" \| "text-select" \| "text-selection" \| "text-wrap" \| "wrap-text" \| "theater" \| "thermometer-snowflake" \| "thermometer-sun" \| "thermometer" \| "thumbs-down" \| "thumbs-up" \| "ticket-check" \| "ticket-minus" \| "ticket-percent" \| "ticket-plus" \| "ticket-slash" \| "ticket-x" \| "ticket" \| "tickets-plane" \| "tickets" \| "timer-off" \| "timer-reset" \| "timer" \| "toggle-left" \| "toggle-right" \| "toilet" \| "tool-case" \| "toolbox" \| "tornado" \| "torus" \| "touchpad-off" \| "touchpad" \| "tower-control" \| "toy-brick" \| "tractor" \| "traffic-cone" \| "train-front-tunnel" \| "train-front" \| "train-track" \| "tram-front" \| "train" \| "transgender" \| "trash-2" \| "trash" \| "tree-deciduous" \| "tree-palm" \| "palmtree" \| "tree-pine" \| "trees" \| "trello" \| "trending-down" \| "trending-up-down" \| "trending-up" \| "triangle-alert" \| "alert-triangle" \| "triangle-dashed" \| "triangle-right" \| "trophy" \| "truck-electric" \| "truck" \| "turkish-lira" \| "turntable" \| "turtle" \| "tv-minimal-play" \| "tv-minimal" \| "tv-2" \| "tv" \| "twitch" \| "twitter" \| "type-outline" \| "umbrella-off" \| "umbrella" \| "undo-2" \| "undo-dot" \| "undo" \| "unfold-horizontal" \| "unfold-vertical" \| "ungroup" \| "university" \| "school-2" \| "unlink-2" \| "unlink" \| "unplug" \| "upload" \| "usb" \| "user-check" \| "user-cog" \| "user-lock" \| "user-minus" \| "user-pen" \| "user-plus" \| "user-round-check" \| "user-check-2" \| "user-round-cog" \| "user-cog-2" \| "user-round-minus" \| "user-minus-2" \| "user-round-pen" \| "user-round-plus" \| "user-plus-2" \| "user-round-search" \| "user-round-x" \| "user-x-2" \| "user-round" \| "user-2" \| "user-search" \| "user-star" \| "user-x" \| "user" \| "users-round" \| "users-2" \| "users" \| "utensils-crossed" \| "fork-knife-crossed" \| "utensils" \| "fork-knife" \| "utility-pole" \| "van" \| "variable" \| "vault" \| "vector-square" \| "vegan" \| "venetian-mask" \| "venus-and-mars" \| "venus" \| "vibrate-off" \| "vibrate" \| "video-off" \| "videotape" \| "voicemail" \| "volleyball" \| "volume-1" \| "volume-2" \| "volume-off" \| "volume-x" \| "volume" \| "vote" \| "wallet-cards" \| "wallet-minimal" \| "wallet-2" \| "wallet" \| "wallpaper" \| "wand-sparkles" \| "wand-2" \| "wand" \| "warehouse" \| "washing-machine" \| "watch" \| "waves-arrow-down" \| "waves-arrow-up" \| "waves-ladder" \| "waves" \| "waypoints" \| "webcam" \| "webhook-off" \| "webhook" \| "weight-tilde" \| "weight" \| "wheat-off" \| "wheat" \| "whole-word" \| "wifi-cog" \| "wifi-high" \| "wifi-low" \| "wifi-off" \| "wifi-pen" \| "wifi-sync" \| "wifi-zero" \| "wifi" \| "wind-arrow-down" \| "wind" \| "wine-off" \| "wine" \| "workflow" \| "worm" \| "wrench" \| "youtube" \| "zap-off" \| "zap" \| "zoom-in" \| "zoom-out"` `"ratio"``"target"``"form"``"rows"``"list"``"download"``"blend"``"type"``"filter"``"scale"``"x"``"columns"``"container"``"grid"``"code"``"link"``"map"``"menu"``"option"``"search"``"section"``"table"``"video"``"circle"``"image"``"text"``"view"``"square"``"pill"``"triangle"``"repeat"``"space"``"scroll"``"focus"``"ghost"``"files"``"file"``"underline"``"dot"``"donut"``"a-arrow-down"``"a-arrow-up"``"a-large-small"``"accessibility"``"activity"``"air-vent"``"airplay"``"alarm-clock-check"``"alarm-check"``"alarm-clock-minus"``"alarm-minus"``"alarm-clock-off"``"alarm-clock-plus"``"alarm-plus"``"alarm-clock"``"alarm-smoke"``"album"``"align-center-horizontal"``"align-center-vertical"``"align-end-horizontal"``"align-end-vertical"``"align-horizontal-distribute-center"``"align-horizontal-distribute-end"``"align-horizontal-distribute-start"``"align-horizontal-justify-center"``"align-horizontal-justify-end"``"align-horizontal-justify-start"``"align-horizontal-space-around"``"align-horizontal-space-between"``"align-start-horizontal"``"align-start-vertical"``"align-vertical-distribute-center"``"align-vertical-distribute-end"``"align-vertical-distribute-start"``"align-vertical-justify-center"``"align-vertical-justify-end"``"align-vertical-justify-start"``"align-vertical-space-around"``"align-vertical-space-between"``"ambulance"``"ampersand"``"ampersands"``"amphora"``"anchor"``"angry"``"annoyed"``"antenna"``"anvil"``"aperture"``"app-window-mac"``"app-window"``"apple"``"archive-restore"``"archive-x"``"archive"``"armchair"``"arrow-big-down-dash"``"arrow-big-down"``"arrow-big-left-dash"``"arrow-big-left"``"arrow-big-right-dash"``"arrow-big-right"``"arrow-big-up-dash"``"arrow-big-up"``"arrow-down-0-1"``"arrow-down-01"``"arrow-down-1-0"``"arrow-down-10"``"arrow-down-a-z"``"arrow-down-az"``"arrow-down-from-line"``"arrow-down-left"``"arrow-down-narrow-wide"``"arrow-down-right"``"arrow-down-to-dot"``"arrow-down-to-line"``"arrow-down-up"``"arrow-down-wide-narrow"``"sort-desc"``"arrow-down-z-a"``"arrow-down-za"``"arrow-down"``"arrow-left-from-line"``"arrow-left-right"``"arrow-left-to-line"``"arrow-left"``"arrow-right-from-line"``"arrow-right-left"``"arrow-right-to-line"``"arrow-right"``"arrow-up-0-1"``"arrow-up-01"``"arrow-up-1-0"``"arrow-up-10"``"arrow-up-a-z"``"arrow-up-az"``"arrow-up-down"``"arrow-up-from-dot"``"arrow-up-from-line"``"arrow-up-left"``"arrow-up-narrow-wide"``"sort-asc"``"arrow-up-right"``"arrow-up-to-line"``"arrow-up-wide-narrow"``"arrow-up-z-a"``"arrow-up-za"``"arrow-up"``"arrows-up-from-line"``"asterisk"``"at-sign"``"atom"``"audio-lines"``"audio-waveform"``"award"``"axe"``"axis-3d"``"axis-3-d"``"baby"``"backpack"``"badge-alert"``"badge-cent"``"badge-check"``"verified"``"badge-dollar-sign"``"badge-euro"``"badge-indian-rupee"``"badge-info"``"badge-japanese-yen"``"badge-minus"``"badge-percent"``"badge-plus"``"badge-pound-sterling"``"badge-question-mark"``"badge-help"``"badge-russian-ruble"``"badge-swiss-franc"``"badge-turkish-lira"``"badge-x"``"badge"``"baggage-claim"``"balloon"``"ban"``"banana"``"bandage"``"banknote-arrow-down"``"banknote-arrow-up"``"banknote-x"``"banknote"``"barcode"``"barrel"``"baseline"``"bath"``"battery-charging"``"battery-full"``"battery-low"``"battery-medium"``"battery-plus"``"battery-warning"``"battery"``"beaker"``"bean-off"``"bean"``"bed-double"``"bed-single"``"bed"``"beef"``"beer-off"``"beer"``"bell-dot"``"bell-electric"``"bell-minus"``"bell-off"``"bell-plus"``"bell-ring"``"bell"``"between-horizontal-end"``"between-horizonal-end"``"between-horizontal-start"``"between-horizonal-start"``"between-vertical-end"``"between-vertical-start"``"biceps-flexed"``"bike"``"binary"``"binoculars"``"biohazard"``"bird"``"birdhouse"``"bitcoin"``"blinds"``"blocks"``"bluetooth-connected"``"bluetooth-off"``"bluetooth-searching"``"bluetooth"``"bold"``"bolt"``"bomb"``"bone"``"book-a"``"book-alert"``"book-audio"``"book-check"``"book-copy"``"book-dashed"``"book-template"``"book-down"``"book-headphones"``"book-heart"``"book-image"``"book-key"``"book-lock"``"book-marked"``"book-minus"``"book-open-check"``"book-open-text"``"book-open"``"book-plus"``"book-search"``"book-text"``"book-type"``"book-up-2"``"book-up"``"book-user"``"book-x"``"book"``"bookmark-check"``"bookmark-minus"``"bookmark-plus"``"bookmark-x"``"bookmark"``"boom-box"``"bot-message-square"``"bot-off"``"bot"``"bottle-wine"``"bow-arrow"``"box"``"boxes"``"braces"``"curly-braces"``"brackets"``"brain-circuit"``"brain-cog"``"brain"``"brick-wall-fire"``"brick-wall-shield"``"brick-wall"``"briefcase-business"``"briefcase-conveyor-belt"``"briefcase-medical"``"briefcase"``"bring-to-front"``"brush-cleaning"``"brush"``"bubbles"``"bug-off"``"bug-play"``"bug"``"building-2"``"building"``"bus-front"``"bus"``"cable-car"``"cable"``"cake-slice"``"cake"``"calculator"``"calendar-1"``"calendar-arrow-down"``"calendar-arrow-up"``"calendar-check-2"``"calendar-check"``"calendar-clock"``"calendar-cog"``"calendar-days"``"calendar-fold"``"calendar-heart"``"calendar-minus-2"``"calendar-minus"``"calendar-off"``"calendar-plus-2"``"calendar-plus"``"calendar-range"``"calendar-search"``"calendar-sync"``"calendar-x-2"``"calendar-x"``"calendar"``"calendars"``"camera-off"``"camera"``"candy-cane"``"candy-off"``"candy"``"cannabis-off"``"cannabis"``"captions-off"``"captions"``"subtitles"``"car-front"``"car-taxi-front"``"car"``"caravan"``"card-sim"``"carrot"``"case-lower"``"case-sensitive"``"case-upper"``"cassette-tape"``"cast"``"castle"``"cat"``"cctv"``"chart-area"``"area-chart"``"chart-bar-big"``"bar-chart-horizontal-big"``"chart-bar-decreasing"``"chart-bar-increasing"``"chart-bar-stacked"``"chart-bar"``"bar-chart-horizontal"``"chart-candlestick"``"candlestick-chart"``"chart-column-big"``"bar-chart-big"``"chart-column-decreasing"``"chart-column-increasing"``"bar-chart-4"``"chart-column-stacked"``"chart-column"``"bar-chart-3"``"chart-gantt"``"chart-line"``"line-chart"``"chart-network"``"chart-no-axes-column-decreasing"``"chart-no-axes-column-increasing"``"bar-chart"``"chart-no-axes-column"``"bar-chart-2"``"chart-no-axes-combined"``"chart-no-axes-gantt"``"gantt-chart"``"chart-pie"``"pie-chart"``"chart-scatter"``"scatter-chart"``"chart-spline"``"check-check"``"check-line"``"check"``"chef-hat"``"cherry"``"chess-bishop"``"chess-king"``"chess-knight"``"chess-pawn"``"chess-queen"``"chess-rook"``"chevron-down"``"chevron-first"``"chevron-last"``"chevron-left"``"chevron-right"``"chevron-up"``"chevrons-down-up"``"chevrons-down"``"chevrons-left-right-ellipsis"``"chevrons-left-right"``"chevrons-left"``"chevrons-right-left"``"chevrons-right"``"chevrons-up-down"``"chevrons-up"``"chromium"``"chrome"``"church"``"cigarette-off"``"cigarette"``"circle-alert"``"alert-circle"``"circle-arrow-down"``"arrow-down-circle"``"circle-arrow-left"``"arrow-left-circle"``"circle-arrow-out-down-left"``"arrow-down-left-from-circle"``"circle-arrow-out-down-right"``"arrow-down-right-from-circle"``"circle-arrow-out-up-left"``"arrow-up-left-from-circle"``"circle-arrow-out-up-right"``"arrow-up-right-from-circle"``"circle-arrow-right"``"arrow-right-circle"``"circle-arrow-up"``"arrow-up-circle"``"circle-check-big"``"check-circle"``"circle-check"``"check-circle-2"``"circle-chevron-down"``"chevron-down-circle"``"circle-chevron-left"``"chevron-left-circle"``"circle-chevron-right"``"chevron-right-circle"``"circle-chevron-up"``"chevron-up-circle"``"circle-dashed"``"circle-divide"``"divide-circle"``"circle-dollar-sign"``"circle-dot-dashed"``"circle-dot"``"circle-ellipsis"``"circle-equal"``"circle-fading-arrow-up"``"circle-fading-plus"``"circle-gauge"``"gauge-circle"``"circle-minus"``"minus-circle"``"circle-off"``"circle-parking-off"``"parking-circle-off"``"circle-parking"``"parking-circle"``"circle-pause"``"pause-circle"``"circle-percent"``"percent-circle"``"circle-pile"``"circle-play"``"play-circle"``"circle-plus"``"plus-circle"``"circle-pound-sterling"``"circle-power"``"power-circle"``"circle-question-mark"``"help-circle"``"circle-help"``"circle-slash-2"``"circle-slashed"``"circle-slash"``"circle-small"``"circle-star"``"circle-stop"``"stop-circle"``"circle-user-round"``"user-circle-2"``"circle-user"``"user-circle"``"circle-x"``"x-circle"``"circuit-board"``"citrus"``"clapperboard"``"clipboard-check"``"clipboard-clock"``"clipboard-copy"``"clipboard-list"``"clipboard-minus"``"clipboard-paste"``"clipboard-pen-line"``"clipboard-signature"``"clipboard-pen"``"clipboard-edit"``"clipboard-plus"``"clipboard-type"``"clipboard-x"``"clipboard"``"clock-1"``"clock-10"``"clock-11"``"clock-12"``"clock-2"``"clock-3"``"clock-4"``"clock-5"``"clock-6"``"clock-7"``"clock-8"``"clock-9"``"clock-alert"``"clock-arrow-down"``"clock-arrow-up"``"clock-check"``"clock-fading"``"clock-plus"``"clock"``"closed-caption"``"cloud-alert"``"cloud-backup"``"cloud-check"``"cloud-cog"``"cloud-download"``"download-cloud"``"cloud-drizzle"``"cloud-fog"``"cloud-hail"``"cloud-lightning"``"cloud-moon-rain"``"cloud-moon"``"cloud-off"``"cloud-rain-wind"``"cloud-rain"``"cloud-snow"``"cloud-sun-rain"``"cloud-sun"``"cloud-sync"``"cloud-upload"``"upload-cloud"``"cloud"``"cloudy"``"clover"``"club"``"code-xml"``"code-2"``"codepen"``"codesandbox"``"coffee"``"cog"``"coins"``"columns-2"``"columns-3-cog"``"columns-settings"``"table-config"``"columns-3"``"panels-left-right"``"columns-4"``"combine"``"command"``"compass"``"component"``"computer"``"concierge-bell"``"cone"``"construction"``"contact-round"``"contact-2"``"contact"``"contrast"``"cookie"``"cooking-pot"``"copy-check"``"copy-minus"``"copy-plus"``"copy-slash"``"copy-x"``"copy"``"copyleft"``"copyright"``"corner-down-left"``"corner-down-right"``"corner-left-down"``"corner-left-up"``"corner-right-down"``"corner-right-up"``"corner-up-left"``"corner-up-right"``"cpu"``"creative-commons"``"credit-card"``"croissant"``"crop"``"cross"``"crosshair"``"crown"``"cuboid"``"cup-soda"``"currency"``"cylinder"``"dam"``"database-backup"``"database-zap"``"database"``"decimals-arrow-left"``"decimals-arrow-right"``"delete"``"dessert"``"diameter"``"diamond-minus"``"diamond-percent"``"percent-diamond"``"diamond-plus"``"diamond"``"dice-1"``"dice-2"``"dice-3"``"dice-4"``"dice-5"``"dice-6"``"dices"``"diff"``"disc-2"``"disc-3"``"disc-album"``"disc"``"divide"``"dna-off"``"dna"``"dock"``"dog"``"dollar-sign"``"door-closed-locked"``"door-closed"``"door-open"``"drafting-compass"``"drama"``"dribbble"``"drill"``"drone"``"droplet-off"``"droplet"``"droplets"``"drum"``"drumstick"``"dumbbell"``"ear-off"``"ear"``"earth-lock"``"earth"``"globe-2"``"eclipse"``"egg-fried"``"egg-off"``"egg"``"ellipsis-vertical"``"more-vertical"``"ellipsis"``"more-horizontal"``"equal-approximately"``"equal-not"``"equal"``"eraser"``"ethernet-port"``"euro"``"ev-charger"``"expand"``"external-link"``"eye-closed"``"eye-off"``"eye"``"facebook"``"factory"``"fan"``"fast-forward"``"feather"``"fence"``"ferris-wheel"``"figma"``"file-archive"``"file-axis-3d"``"file-axis-3-d"``"file-badge"``"file-badge-2"``"file-box"``"file-braces-corner"``"file-json-2"``"file-braces"``"file-json"``"file-chart-column-increasing"``"file-bar-chart"``"file-chart-column"``"file-bar-chart-2"``"file-chart-line"``"file-line-chart"``"file-chart-pie"``"file-pie-chart"``"file-check-corner"``"file-check-2"``"file-check"``"file-clock"``"file-code-corner"``"file-code-2"``"file-code"``"file-cog"``"file-cog-2"``"file-diff"``"file-digit"``"file-down"``"file-exclamation-point"``"file-warning"``"file-headphone"``"file-audio"``"file-audio-2"``"file-heart"``"file-image"``"file-input"``"file-key"``"file-key-2"``"file-lock"``"file-lock-2"``"file-minus-corner"``"file-minus-2"``"file-minus"``"file-music"``"file-output"``"file-pen-line"``"file-signature"``"file-pen"``"file-edit"``"file-play"``"file-video"``"file-plus-corner"``"file-plus-2"``"file-plus"``"file-question-mark"``"file-question"``"file-scan"``"file-search-corner"``"file-search-2"``"file-search"``"file-signal"``"file-volume-2"``"file-sliders"``"file-spreadsheet"``"file-stack"``"file-symlink"``"file-terminal"``"file-text"``"file-type-corner"``"file-type-2"``"file-type"``"file-up"``"file-user"``"file-video-camera"``"file-video-2"``"file-volume"``"file-x-corner"``"file-x-2"``"file-x"``"film"``"fingerprint-pattern"``"fingerprint"``"fire-extinguisher"``"fish-off"``"fish-symbol"``"fish"``"fishing-hook"``"flag-off"``"flag-triangle-left"``"flag-triangle-right"``"flag"``"flame-kindling"``"flame"``"flashlight-off"``"flashlight"``"flask-conical-off"``"flask-conical"``"flask-round"``"flip-horizontal-2"``"flip-horizontal"``"flip-vertical-2"``"flip-vertical"``"flower-2"``"flower"``"fold-horizontal"``"fold-vertical"``"folder-archive"``"folder-check"``"folder-clock"``"folder-closed"``"folder-code"``"folder-cog"``"folder-cog-2"``"folder-dot"``"folder-down"``"folder-git-2"``"folder-git"``"folder-heart"``"folder-input"``"folder-kanban"``"folder-key"``"folder-lock"``"folder-minus"``"folder-open-dot"``"folder-open"``"folder-output"``"folder-pen"``"folder-edit"``"folder-plus"``"folder-root"``"folder-search-2"``"folder-search"``"folder-symlink"``"folder-sync"``"folder-tree"``"folder-up"``"folder-x"``"folder"``"folders"``"footprints"``"forklift"``"forward"``"frame"``"framer"``"frown"``"fuel"``"fullscreen"``"funnel-plus"``"funnel-x"``"filter-x"``"funnel"``"gallery-horizontal-end"``"gallery-horizontal"``"gallery-thumbnails"``"gallery-vertical-end"``"gallery-vertical"``"gamepad-2"``"gamepad-directional"``"gamepad"``"gauge"``"gavel"``"gem"``"georgian-lari"``"gift"``"git-branch-minus"``"git-branch-plus"``"git-branch"``"git-commit-horizontal"``"git-commit"``"git-commit-vertical"``"git-compare-arrows"``"git-compare"``"git-fork"``"git-graph"``"git-merge"``"git-pull-request-arrow"``"git-pull-request-closed"``"git-pull-request-create-arrow"``"git-pull-request-create"``"git-pull-request-draft"``"git-pull-request"``"github"``"gitlab"``"glass-water"``"glasses"``"globe-lock"``"globe"``"goal"``"gpu"``"graduation-cap"``"grape"``"grid-2x2-check"``"grid-2-x-2-check"``"grid-2x2-plus"``"grid-2-x-2-plus"``"grid-2x2-x"``"grid-2-x-2-x"``"grid-2x2"``"grid-2-x-2"``"grid-3x2"``"grid-3x3"``"grid-3-x-3"``"grip-horizontal"``"grip-vertical"``"grip"``"group"``"guitar"``"ham"``"hamburger"``"hammer"``"hand-coins"``"hand-fist"``"hand-grab"``"grab"``"hand-heart"``"hand-helping"``"helping-hand"``"hand-metal"``"hand-platter"``"hand"``"handbag"``"handshake"``"hard-drive-download"``"hard-drive-upload"``"hard-drive"``"hard-hat"``"hash"``"hat-glasses"``"haze"``"hd"``"hdmi-port"``"heading-1"``"heading-2"``"heading-3"``"heading-4"``"heading-5"``"heading-6"``"heading"``"headphone-off"``"headphones"``"headset"``"heart-crack"``"heart-handshake"``"heart-minus"``"heart-off"``"heart-plus"``"heart-pulse"``"heart"``"heater"``"helicopter"``"hexagon"``"highlighter"``"history"``"hop-off"``"hop"``"hospital"``"hotel"``"hourglass"``"house-heart"``"house-plug"``"house-plus"``"house-wifi"``"house"``"home"``"ice-cream-bowl"``"ice-cream-2"``"ice-cream-cone"``"ice-cream"``"id-card-lanyard"``"id-card"``"image-down"``"image-minus"``"image-off"``"image-play"``"image-plus"``"image-up"``"image-upscale"``"images"``"import"``"inbox"``"indian-rupee"``"infinity"``"info"``"inspection-panel"``"instagram"``"italic"``"iteration-ccw"``"iteration-cw"``"japanese-yen"``"joystick"``"kanban"``"kayak"``"key-round"``"key-square"``"key"``"keyboard-music"``"keyboard-off"``"keyboard"``"lamp-ceiling"``"lamp-desk"``"lamp-floor"``"lamp-wall-down"``"lamp-wall-up"``"lamp"``"land-plot"``"landmark"``"languages"``"laptop-minimal-check"``"laptop-minimal"``"laptop-2"``"laptop"``"lasso-select"``"lasso"``"laugh"``"layers-2"``"layers-plus"``"layers"``"layers-3"``"layout-dashboard"``"layout-grid"``"layout-list"``"layout-panel-left"``"layout-panel-top"``"layout-template"``"leaf"``"leafy-green"``"lectern"``"library-big"``"library"``"life-buoy"``"ligature"``"lightbulb-off"``"lightbulb"``"line-squiggle"``"link-2-off"``"link-2"``"linkedin"``"list-check"``"list-checks"``"list-chevrons-down-up"``"list-chevrons-up-down"``"list-collapse"``"list-end"``"list-filter-plus"``"list-filter"``"list-indent-decrease"``"outdent"``"indent-decrease"``"list-indent-increase"``"indent"``"indent-increase"``"list-minus"``"list-music"``"list-ordered"``"list-plus"``"list-restart"``"list-start"``"list-todo"``"list-tree"``"list-video"``"list-x"``"loader-circle"``"loader-2"``"loader-pinwheel"``"loader"``"locate-fixed"``"locate-off"``"locate"``"lock-keyhole-open"``"unlock-keyhole"``"lock-keyhole"``"lock-open"``"unlock"``"lock"``"log-in"``"log-out"``"logs"``"lollipop"``"luggage"``"magnet"``"mail-check"``"mail-minus"``"mail-open"``"mail-plus"``"mail-question-mark"``"mail-question"``"mail-search"``"mail-warning"``"mail-x"``"mail"``"mailbox"``"mails"``"map-minus"``"map-pin-check-inside"``"map-pin-check"``"map-pin-house"``"map-pin-minus-inside"``"map-pin-minus"``"map-pin-off"``"map-pin-pen"``"location-edit"``"map-pin-plus-inside"``"map-pin-plus"``"map-pin-x-inside"``"map-pin-x"``"map-pin"``"map-pinned"``"map-plus"``"mars-stroke"``"mars"``"martini"``"maximize-2"``"maximize"``"medal"``"megaphone-off"``"megaphone"``"meh"``"memory-stick"``"merge"``"message-circle-code"``"message-circle-dashed"``"message-circle-heart"``"message-circle-more"``"message-circle-off"``"message-circle-plus"``"message-circle-question-mark"``"message-circle-question"``"message-circle-reply"``"message-circle-warning"``"message-circle-x"``"message-circle"``"message-square-code"``"message-square-dashed"``"message-square-diff"``"message-square-dot"``"message-square-heart"``"message-square-lock"``"message-square-more"``"message-square-off"``"message-square-plus"``"message-square-quote"``"message-square-reply"``"message-square-share"``"message-square-text"``"message-square-warning"``"message-square-x"``"message-square"``"messages-square"``"mic-off"``"mic-vocal"``"mic-2"``"mic"``"microchip"``"microscope"``"microwave"``"milestone"``"milk-off"``"milk"``"minimize-2"``"minimize"``"minus"``"monitor-check"``"monitor-cloud"``"monitor-cog"``"monitor-dot"``"monitor-down"``"monitor-off"``"monitor-pause"``"monitor-play"``"monitor-smartphone"``"monitor-speaker"``"monitor-stop"``"monitor-up"``"monitor-x"``"monitor"``"moon-star"``"moon"``"motorbike"``"mountain-snow"``"mountain"``"mouse-off"``"mouse-pointer-2-off"``"mouse-pointer-2"``"mouse-pointer-ban"``"mouse-pointer-click"``"mouse-pointer"``"mouse"``"move-3d"``"move-3-d"``"move-diagonal-2"``"move-diagonal"``"move-down-left"``"move-down-right"``"move-down"``"move-horizontal"``"move-left"``"move-right"``"move-up-left"``"move-up-right"``"move-up"``"move-vertical"``"move"``"music-2"``"music-3"``"music-4"``"music"``"navigation-2-off"``"navigation-2"``"navigation-off"``"navigation"``"network"``"newspaper"``"nfc"``"non-binary"``"notebook-pen"``"notebook-tabs"``"notebook-text"``"notebook"``"notepad-text-dashed"``"notepad-text"``"nut-off"``"nut"``"octagon-alert"``"alert-octagon"``"octagon-minus"``"octagon-pause"``"pause-octagon"``"octagon-x"``"x-octagon"``"octagon"``"omega"``"orbit"``"origami"``"package-2"``"package-check"``"package-minus"``"package-open"``"package-plus"``"package-search"``"package-x"``"package"``"paint-bucket"``"paint-roller"``"paintbrush-vertical"``"paintbrush-2"``"paintbrush"``"palette"``"panda"``"panel-bottom-close"``"panel-bottom-dashed"``"panel-bottom-inactive"``"panel-bottom-open"``"panel-bottom"``"panel-left-close"``"sidebar-close"``"panel-left-dashed"``"panel-left-inactive"``"panel-left-open"``"sidebar-open"``"panel-left-right-dashed"``"panel-left"``"sidebar"``"panel-right-close"``"panel-right-dashed"``"panel-right-inactive"``"panel-right-open"``"panel-right"``"panel-top-bottom-dashed"``"panel-top-close"``"panel-top-dashed"``"panel-top-inactive"``"panel-top-open"``"panel-top"``"panels-left-bottom"``"panels-right-bottom"``"panels-top-left"``"layout"``"paperclip"``"parentheses"``"parking-meter"``"party-popper"``"pause"``"paw-print"``"pc-case"``"pen-line"``"edit-3"``"pen-off"``"pen-tool"``"pen"``"edit-2"``"pencil-line"``"pencil-off"``"pencil-ruler"``"pencil"``"pentagon"``"percent"``"person-standing"``"philippine-peso"``"phone-call"``"phone-forwarded"``"phone-incoming"``"phone-missed"``"phone-off"``"phone-outgoing"``"phone"``"pi"``"piano"``"pickaxe"``"picture-in-picture-2"``"picture-in-picture"``"piggy-bank"``"pilcrow-left"``"pilcrow-right"``"pilcrow"``"pill-bottle"``"pin-off"``"pin"``"pipette"``"pizza"``"plane-landing"``"plane-takeoff"``"plane"``"play"``"plug-2"``"plug-zap"``"plug-zap-2"``"plug"``"plus"``"pocket-knife"``"pocket"``"podcast"``"pointer-off"``"pointer"``"popcorn"``"popsicle"``"pound-sterling"``"power-off"``"power"``"presentation"``"printer-check"``"printer"``"projector"``"proportions"``"puzzle"``"pyramid"``"qr-code"``"quote"``"rabbit"``"radar"``"radiation"``"radical"``"radio-receiver"``"radio-tower"``"radio"``"radius"``"rail-symbol"``"rainbow"``"rat"``"receipt-cent"``"receipt-euro"``"receipt-indian-rupee"``"receipt-japanese-yen"``"receipt-pound-sterling"``"receipt-russian-ruble"``"receipt-swiss-franc"``"receipt-text"``"receipt-turkish-lira"``"receipt"``"rectangle-circle"``"rectangle-ellipsis"``"form-input"``"rectangle-goggles"``"rectangle-horizontal"``"rectangle-vertical"``"recycle"``"redo-2"``"redo-dot"``"redo"``"refresh-ccw-dot"``"refresh-ccw"``"refresh-cw-off"``"refresh-cw"``"refrigerator"``"regex"``"remove-formatting"``"repeat-1"``"repeat-2"``"replace-all"``"replace"``"reply-all"``"reply"``"rewind"``"ribbon"``"rocket"``"rocking-chair"``"roller-coaster"``"rose"``"rotate-3d"``"rotate-3-d"``"rotate-ccw-key"``"rotate-ccw-square"``"rotate-ccw"``"rotate-cw-square"``"rotate-cw"``"route-off"``"route"``"router"``"rows-2"``"rows-3"``"panels-top-bottom"``"rows-4"``"rss"``"ruler-dimension-line"``"ruler"``"russian-ruble"``"sailboat"``"salad"``"sandwich"``"satellite-dish"``"satellite"``"saudi-riyal"``"save-all"``"save-off"``"save"``"scale-3d"``"scale-3-d"``"scaling"``"scan-barcode"``"scan-eye"``"scan-face"``"scan-heart"``"scan-line"``"scan-qr-code"``"scan-search"``"scan-text"``"scan"``"school"``"scissors-line-dashed"``"scissors"``"scooter"``"screen-share-off"``"screen-share"``"scroll-text"``"search-alert"``"search-check"``"search-code"``"search-slash"``"search-x"``"send-horizontal"``"send-horizonal"``"send-to-back"``"send"``"separator-horizontal"``"separator-vertical"``"server-cog"``"server-crash"``"server-off"``"server"``"settings-2"``"settings"``"shapes"``"share-2"``"share"``"sheet"``"shell"``"shield-alert"``"shield-ban"``"shield-check"``"shield-ellipsis"``"shield-half"``"shield-minus"``"shield-off"``"shield-plus"``"shield-question-mark"``"shield-question"``"shield-user"``"shield-x"``"shield-close"``"shield"``"ship-wheel"``"ship"``"shirt"``"shopping-bag"``"shopping-basket"``"shopping-cart"``"shovel"``"shower-head"``"shredder"``"shrimp"``"shrink"``"shrub"``"shuffle"``"sigma"``"signal-high"``"signal-low"``"signal-medium"``"signal-zero"``"signal"``"signature"``"signpost-big"``"signpost"``"siren"``"skip-back"``"skip-forward"``"skull"``"slack"``"slash"``"slice"``"sliders-horizontal"``"sliders-vertical"``"sliders"``"smartphone-charging"``"smartphone-nfc"``"smartphone"``"smile-plus"``"smile"``"snail"``"snowflake"``"soap-dispenser-droplet"``"sofa"``"solar-panel"``"soup"``"spade"``"sparkle"``"sparkles"``"stars"``"speaker"``"speech"``"spell-check-2"``"spell-check"``"spline-pointer"``"spline"``"split"``"spool"``"spotlight"``"spray-can"``"sprout"``"square-activity"``"activity-square"``"square-arrow-down-left"``"arrow-down-left-square"``"square-arrow-down-right"``"arrow-down-right-square"``"square-arrow-down"``"arrow-down-square"``"square-arrow-left"``"arrow-left-square"``"square-arrow-out-down-left"``"arrow-down-left-from-square"``"square-arrow-out-down-right"``"arrow-down-right-from-square"``"square-arrow-out-up-left"``"arrow-up-left-from-square"``"square-arrow-out-up-right"``"arrow-up-right-from-square"``"square-arrow-right"``"arrow-right-square"``"square-arrow-up-left"``"arrow-up-left-square"``"square-arrow-up-right"``"arrow-up-right-square"``"square-arrow-up"``"arrow-up-square"``"square-asterisk"``"asterisk-square"``"square-bottom-dashed-scissors"``"scissors-square-dashed-bottom"``"square-chart-gantt"``"gantt-chart-square"``"square-gantt-chart"``"square-check-big"``"check-square"``"square-check"``"check-square-2"``"square-chevron-down"``"chevron-down-square"``"square-chevron-left"``"chevron-left-square"``"square-chevron-right"``"chevron-right-square"``"square-chevron-up"``"chevron-up-square"``"square-code"``"code-square"``"square-dashed-bottom-code"``"square-dashed-bottom"``"square-dashed-kanban"``"kanban-square-dashed"``"square-dashed-mouse-pointer"``"mouse-pointer-square-dashed"``"square-dashed-top-solid"``"square-dashed"``"box-select"``"square-divide"``"divide-square"``"square-dot"``"dot-square"``"square-equal"``"equal-square"``"square-function"``"function-square"``"square-kanban"``"kanban-square"``"square-library"``"library-square"``"square-m"``"m-square"``"square-menu"``"menu-square"``"square-minus"``"minus-square"``"square-mouse-pointer"``"inspect"``"square-parking-off"``"parking-square-off"``"square-parking"``"parking-square"``"square-pause"``"square-pen"``"pen-box"``"edit"``"pen-square"``"square-percent"``"percent-square"``"square-pi"``"pi-square"``"square-pilcrow"``"pilcrow-square"``"square-play"``"play-square"``"square-plus"``"plus-square"``"square-power"``"power-square"``"square-radical"``"square-round-corner"``"square-scissors"``"scissors-square"``"square-sigma"``"sigma-square"``"square-slash"``"slash-square"``"square-split-horizontal"``"split-square-horizontal"``"square-split-vertical"``"split-square-vertical"``"square-square"``"square-stack"``"square-star"``"square-stop"``"square-terminal"``"terminal-square"``"square-user-round"``"user-square-2"``"square-user"``"user-square"``"square-x"``"x-square"``"squares-exclude"``"squares-intersect"``"squares-subtract"``"squares-unite"``"squircle-dashed"``"squircle"``"squirrel"``"stamp"``"star-half"``"star-off"``"star"``"step-back"``"step-forward"``"stethoscope"``"sticker"``"sticky-note"``"stone"``"store"``"stretch-horizontal"``"stretch-vertical"``"strikethrough"``"subscript"``"sun-dim"``"sun-medium"``"sun-moon"``"sun-snow"``"sun"``"sunrise"``"sunset"``"superscript"``"swatch-book"``"swiss-franc"``"switch-camera"``"sword"``"swords"``"syringe"``"table-2"``"table-cells-merge"``"table-cells-split"``"table-columns-split"``"table-of-contents"``"table-properties"``"table-rows-split"``"tablet-smartphone"``"tablet"``"tablets"``"tag"``"tags"``"tally-1"``"tally-2"``"tally-3"``"tally-4"``"tally-5"``"tangent"``"telescope"``"tent-tree"``"tent"``"terminal"``"test-tube-diagonal"``"test-tube-2"``"test-tube"``"test-tubes"``"text-align-center"``"align-center"``"text-align-end"``"align-right"``"text-align-justify"``"align-justify"``"text-align-start"``"align-left"``"text-cursor-input"``"text-cursor"``"text-initial"``"letter-text"``"text-quote"``"text-search"``"text-select"``"text-selection"``"text-wrap"``"wrap-text"``"theater"``"thermometer-snowflake"``"thermometer-sun"``"thermometer"``"thumbs-down"``"thumbs-up"``"ticket-check"``"ticket-minus"``"ticket-percent"``"ticket-plus"``"ticket-slash"``"ticket-x"``"ticket"``"tickets-plane"``"tickets"``"timer-off"``"timer-reset"``"timer"``"toggle-left"``"toggle-right"``"toilet"``"tool-case"``"toolbox"``"tornado"``"torus"``"touchpad-off"``"touchpad"``"tower-control"``"toy-brick"``"tractor"``"traffic-cone"``"train-front-tunnel"``"train-front"``"train-track"``"tram-front"``"train"``"transgender"``"trash-2"``"trash"``"tree-deciduous"``"tree-palm"``"palmtree"``"tree-pine"``"trees"``"trello"``"trending-down"``"trending-up-down"``"trending-up"``"triangle-alert"``"alert-triangle"``"triangle-dashed"``"triangle-right"``"trophy"``"truck-electric"``"truck"``"turkish-lira"``"turntable"``"turtle"``"tv-minimal-play"``"tv-minimal"``"tv-2"``"tv"``"twitch"``"twitter"``"type-outline"``"umbrella-off"``"umbrella"``"undo-2"``"undo-dot"``"undo"``"unfold-horizontal"``"unfold-vertical"``"ungroup"``"university"``"school-2"``"unlink-2"``"unlink"``"unplug"``"upload"``"usb"``"user-check"``"user-cog"``"user-lock"``"user-minus"``"user-pen"``"user-plus"``"user-round-check"``"user-check-2"``"user-round-cog"``"user-cog-2"``"user-round-minus"``"user-minus-2"``"user-round-pen"``"user-round-plus"``"user-plus-2"``"user-round-search"``"user-round-x"``"user-x-2"``"user-round"``"user-2"``"user-search"``"user-star"``"user-x"``"user"``"users-round"``"users-2"``"users"``"utensils-crossed"``"fork-knife-crossed"``"utensils"``"fork-knife"``"utility-pole"``"van"``"variable"``"vault"``"vector-square"``"vegan"``"venetian-mask"``"venus-and-mars"``"venus"``"vibrate-off"``"vibrate"``"video-off"``"videotape"``"voicemail"``"volleyball"``"volume-1"``"volume-2"``"volume-off"``"volume-x"``"volume"``"vote"``"wallet-cards"``"wallet-minimal"``"wallet-2"``"wallet"``"wallpaper"``"wand-sparkles"``"wand-2"``"wand"``"warehouse"``"washing-machine"``"watch"``"waves-arrow-down"``"waves-arrow-up"``"waves-ladder"``"waves"``"waypoints"``"webcam"``"webhook-off"``"webhook"``"weight-tilde"``"weight"``"wheat-off"``"wheat"``"whole-word"``"wifi-cog"``"wifi-high"``"wifi-low"``"wifi-off"``"wifi-pen"``"wifi-sync"``"wifi-zero"``"wifi"``"wind-arrow-down"``"wind"``"wine-off"``"wine"``"workflow"``"worm"``"wrench"``"youtube"``"zap-off"``"zap"``"zoom-in"``"zoom-out"` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L16) |
| `defaultValue` | View type `"ratio" \| "target" \| "form" \| "rows" \| "list" \| "download" \| "blend" \| "type" \| "filter" \| "scale" \| "x" \| "columns" \| "container" \| "grid" \| "code" \| "link" \| "map" \| "menu" \| "option" \| "search" \| "section" \| "table" \| "video" \| "circle" \| "image" \| "text" \| "view" \| "square" \| "pill" \| "triangle" \| "repeat" \| "space" \| "scroll" \| "focus" \| "ghost" \| "files" \| "file" \| "underline" \| "dot" \| "donut" \| "a-arrow-down" \| "a-arrow-up" \| "a-large-small" \| "accessibility" \| "activity" \| "air-vent" \| "airplay" \| "alarm-clock-check" \| "alarm-check" \| "alarm-clock-minus" \| "alarm-minus" \| "alarm-clock-off" \| "alarm-clock-plus" \| "alarm-plus" \| "alarm-clock" \| "alarm-smoke" \| "album" \| "align-center-horizontal" \| "align-center-vertical" \| "align-end-horizontal" \| "align-end-vertical" \| "align-horizontal-distribute-center" \| "align-horizontal-distribute-end" \| "align-horizontal-distribute-start" \| "align-horizontal-justify-center" \| "align-horizontal-justify-end" \| "align-horizontal-justify-start" \| "align-horizontal-space-around" \| "align-horizontal-space-between" \| "align-start-horizontal" \| "align-start-vertical" \| "align-vertical-distribute-center" \| "align-vertical-distribute-end" \| "align-vertical-distribute-start" \| "align-vertical-justify-center" \| "align-vertical-justify-end" \| "align-vertical-justify-start" \| "align-vertical-space-around" \| "align-vertical-space-between" \| "ambulance" \| "ampersand" \| "ampersands" \| "amphora" \| "anchor" \| "angry" \| "annoyed" \| "antenna" \| "anvil" \| "aperture" \| "app-window-mac" \| "app-window" \| "apple" \| "archive-restore" \| "archive-x" \| "archive" \| "armchair" \| "arrow-big-down-dash" \| "arrow-big-down" \| "arrow-big-left-dash" \| "arrow-big-left" \| "arrow-big-right-dash" \| "arrow-big-right" \| "arrow-big-up-dash" \| "arrow-big-up" \| "arrow-down-0-1" \| "arrow-down-01" \| "arrow-down-1-0" \| "arrow-down-10" \| "arrow-down-a-z" \| "arrow-down-az" \| "arrow-down-from-line" \| "arrow-down-left" \| "arrow-down-narrow-wide" \| "arrow-down-right" \| "arrow-down-to-dot" \| "arrow-down-to-line" \| "arrow-down-up" \| "arrow-down-wide-narrow" \| "sort-desc" \| "arrow-down-z-a" \| "arrow-down-za" \| "arrow-down" \| "arrow-left-from-line" \| "arrow-left-right" \| "arrow-left-to-line" \| "arrow-left" \| "arrow-right-from-line" \| "arrow-right-left" \| "arrow-right-to-line" \| "arrow-right" \| "arrow-up-0-1" \| "arrow-up-01" \| "arrow-up-1-0" \| "arrow-up-10" \| "arrow-up-a-z" \| "arrow-up-az" \| "arrow-up-down" \| "arrow-up-from-dot" \| "arrow-up-from-line" \| "arrow-up-left" \| "arrow-up-narrow-wide" \| "sort-asc" \| "arrow-up-right" \| "arrow-up-to-line" \| "arrow-up-wide-narrow" \| "arrow-up-z-a" \| "arrow-up-za" \| "arrow-up" \| "arrows-up-from-line" \| "asterisk" \| "at-sign" \| "atom" \| "audio-lines" \| "audio-waveform" \| "award" \| "axe" \| "axis-3d" \| "axis-3-d" \| "baby" \| "backpack" \| "badge-alert" \| "badge-cent" \| "badge-check" \| "verified" \| "badge-dollar-sign" \| "badge-euro" \| "badge-indian-rupee" \| "badge-info" \| "badge-japanese-yen" \| "badge-minus" \| "badge-percent" \| "badge-plus" \| "badge-pound-sterling" \| "badge-question-mark" \| "badge-help" \| "badge-russian-ruble" \| "badge-swiss-franc" \| "badge-turkish-lira" \| "badge-x" \| "badge" \| "baggage-claim" \| "balloon" \| "ban" \| "banana" \| "bandage" \| "banknote-arrow-down" \| "banknote-arrow-up" \| "banknote-x" \| "banknote" \| "barcode" \| "barrel" \| "baseline" \| "bath" \| "battery-charging" \| "battery-full" \| "battery-low" \| "battery-medium" \| "battery-plus" \| "battery-warning" \| "battery" \| "beaker" \| "bean-off" \| "bean" \| "bed-double" \| "bed-single" \| "bed" \| "beef" \| "beer-off" \| "beer" \| "bell-dot" \| "bell-electric" \| "bell-minus" \| "bell-off" \| "bell-plus" \| "bell-ring" \| "bell" \| "between-horizontal-end" \| "between-horizonal-end" \| "between-horizontal-start" \| "between-horizonal-start" \| "between-vertical-end" \| "between-vertical-start" \| "biceps-flexed" \| "bike" \| "binary" \| "binoculars" \| "biohazard" \| "bird" \| "birdhouse" \| "bitcoin" \| "blinds" \| "blocks" \| "bluetooth-connected" \| "bluetooth-off" \| "bluetooth-searching" \| "bluetooth" \| "bold" \| "bolt" \| "bomb" \| "bone" \| "book-a" \| "book-alert" \| "book-audio" \| "book-check" \| "book-copy" \| "book-dashed" \| "book-template" \| "book-down" \| "book-headphones" \| "book-heart" \| "book-image" \| "book-key" \| "book-lock" \| "book-marked" \| "book-minus" \| "book-open-check" \| "book-open-text" \| "book-open" \| "book-plus" \| "book-search" \| "book-text" \| "book-type" \| "book-up-2" \| "book-up" \| "book-user" \| "book-x" \| "book" \| "bookmark-check" \| "bookmark-minus" \| "bookmark-plus" \| "bookmark-x" \| "bookmark" \| "boom-box" \| "bot-message-square" \| "bot-off" \| "bot" \| "bottle-wine" \| "bow-arrow" \| "box" \| "boxes" \| "braces" \| "curly-braces" \| "brackets" \| "brain-circuit" \| "brain-cog" \| "brain" \| "brick-wall-fire" \| "brick-wall-shield" \| "brick-wall" \| "briefcase-business" \| "briefcase-conveyor-belt" \| "briefcase-medical" \| "briefcase" \| "bring-to-front" \| "brush-cleaning" \| "brush" \| "bubbles" \| "bug-off" \| "bug-play" \| "bug" \| "building-2" \| "building" \| "bus-front" \| "bus" \| "cable-car" \| "cable" \| "cake-slice" \| "cake" \| "calculator" \| "calendar-1" \| "calendar-arrow-down" \| "calendar-arrow-up" \| "calendar-check-2" \| "calendar-check" \| "calendar-clock" \| "calendar-cog" \| "calendar-days" \| "calendar-fold" \| "calendar-heart" \| "calendar-minus-2" \| "calendar-minus" \| "calendar-off" \| "calendar-plus-2" \| "calendar-plus" \| "calendar-range" \| "calendar-search" \| "calendar-sync" \| "calendar-x-2" \| "calendar-x" \| "calendar" \| "calendars" \| "camera-off" \| "camera" \| "candy-cane" \| "candy-off" \| "candy" \| "cannabis-off" \| "cannabis" \| "captions-off" \| "captions" \| "subtitles" \| "car-front" \| "car-taxi-front" \| "car" \| "caravan" \| "card-sim" \| "carrot" \| "case-lower" \| "case-sensitive" \| "case-upper" \| "cassette-tape" \| "cast" \| "castle" \| "cat" \| "cctv" \| "chart-area" \| "area-chart" \| "chart-bar-big" \| "bar-chart-horizontal-big" \| "chart-bar-decreasing" \| "chart-bar-increasing" \| "chart-bar-stacked" \| "chart-bar" \| "bar-chart-horizontal" \| "chart-candlestick" \| "candlestick-chart" \| "chart-column-big" \| "bar-chart-big" \| "chart-column-decreasing" \| "chart-column-increasing" \| "bar-chart-4" \| "chart-column-stacked" \| "chart-column" \| "bar-chart-3" \| "chart-gantt" \| "chart-line" \| "line-chart" \| "chart-network" \| "chart-no-axes-column-decreasing" \| "chart-no-axes-column-increasing" \| "bar-chart" \| "chart-no-axes-column" \| "bar-chart-2" \| "chart-no-axes-combined" \| "chart-no-axes-gantt" \| "gantt-chart" \| "chart-pie" \| "pie-chart" \| "chart-scatter" \| "scatter-chart" \| "chart-spline" \| "check-check" \| "check-line" \| "check" \| "chef-hat" \| "cherry" \| "chess-bishop" \| "chess-king" \| "chess-knight" \| "chess-pawn" \| "chess-queen" \| "chess-rook" \| "chevron-down" \| "chevron-first" \| "chevron-last" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "chevrons-down-up" \| "chevrons-down" \| "chevrons-left-right-ellipsis" \| "chevrons-left-right" \| "chevrons-left" \| "chevrons-right-left" \| "chevrons-right" \| "chevrons-up-down" \| "chevrons-up" \| "chromium" \| "chrome" \| "church" \| "cigarette-off" \| "cigarette" \| "circle-alert" \| "alert-circle" \| "circle-arrow-down" \| "arrow-down-circle" \| "circle-arrow-left" \| "arrow-left-circle" \| "circle-arrow-out-down-left" \| "arrow-down-left-from-circle" \| "circle-arrow-out-down-right" \| "arrow-down-right-from-circle" \| "circle-arrow-out-up-left" \| "arrow-up-left-from-circle" \| "circle-arrow-out-up-right" \| "arrow-up-right-from-circle" \| "circle-arrow-right" \| "arrow-right-circle" \| "circle-arrow-up" \| "arrow-up-circle" \| "circle-check-big" \| "check-circle" \| "circle-check" \| "check-circle-2" \| "circle-chevron-down" \| "chevron-down-circle" \| "circle-chevron-left" \| "chevron-left-circle" \| "circle-chevron-right" \| "chevron-right-circle" \| "circle-chevron-up" \| "chevron-up-circle" \| "circle-dashed" \| "circle-divide" \| "divide-circle" \| "circle-dollar-sign" \| "circle-dot-dashed" \| "circle-dot" \| "circle-ellipsis" \| "circle-equal" \| "circle-fading-arrow-up" \| "circle-fading-plus" \| "circle-gauge" \| "gauge-circle" \| "circle-minus" \| "minus-circle" \| "circle-off" \| "circle-parking-off" \| "parking-circle-off" \| "circle-parking" \| "parking-circle" \| "circle-pause" \| "pause-circle" \| "circle-percent" \| "percent-circle" \| "circle-pile" \| "circle-play" \| "play-circle" \| "circle-plus" \| "plus-circle" \| "circle-pound-sterling" \| "circle-power" \| "power-circle" \| "circle-question-mark" \| "help-circle" \| "circle-help" \| "circle-slash-2" \| "circle-slashed" \| "circle-slash" \| "circle-small" \| "circle-star" \| "circle-stop" \| "stop-circle" \| "circle-user-round" \| "user-circle-2" \| "circle-user" \| "user-circle" \| "circle-x" \| "x-circle" \| "circuit-board" \| "citrus" \| "clapperboard" \| "clipboard-check" \| "clipboard-clock" \| "clipboard-copy" \| "clipboard-list" \| "clipboard-minus" \| "clipboard-paste" \| "clipboard-pen-line" \| "clipboard-signature" \| "clipboard-pen" \| "clipboard-edit" \| "clipboard-plus" \| "clipboard-type" \| "clipboard-x" \| "clipboard" \| "clock-1" \| "clock-10" \| "clock-11" \| "clock-12" \| "clock-2" \| "clock-3" \| "clock-4" \| "clock-5" \| "clock-6" \| "clock-7" \| "clock-8" \| "clock-9" \| "clock-alert" \| "clock-arrow-down" \| "clock-arrow-up" \| "clock-check" \| "clock-fading" \| "clock-plus" \| "clock" \| "closed-caption" \| "cloud-alert" \| "cloud-backup" \| "cloud-check" \| "cloud-cog" \| "cloud-download" \| "download-cloud" \| "cloud-drizzle" \| "cloud-fog" \| "cloud-hail" \| "cloud-lightning" \| "cloud-moon-rain" \| "cloud-moon" \| "cloud-off" \| "cloud-rain-wind" \| "cloud-rain" \| "cloud-snow" \| "cloud-sun-rain" \| "cloud-sun" \| "cloud-sync" \| "cloud-upload" \| "upload-cloud" \| "cloud" \| "cloudy" \| "clover" \| "club" \| "code-xml" \| "code-2" \| "codepen" \| "codesandbox" \| "coffee" \| "cog" \| "coins" \| "columns-2" \| "columns-3-cog" \| "columns-settings" \| "table-config" \| "columns-3" \| "panels-left-right" \| "columns-4" \| "combine" \| "command" \| "compass" \| "component" \| "computer" \| "concierge-bell" \| "cone" \| "construction" \| "contact-round" \| "contact-2" \| "contact" \| "contrast" \| "cookie" \| "cooking-pot" \| "copy-check" \| "copy-minus" \| "copy-plus" \| "copy-slash" \| "copy-x" \| "copy" \| "copyleft" \| "copyright" \| "corner-down-left" \| "corner-down-right" \| "corner-left-down" \| "corner-left-up" \| "corner-right-down" \| "corner-right-up" \| "corner-up-left" \| "corner-up-right" \| "cpu" \| "creative-commons" \| "credit-card" \| "croissant" \| "crop" \| "cross" \| "crosshair" \| "crown" \| "cuboid" \| "cup-soda" \| "currency" \| "cylinder" \| "dam" \| "database-backup" \| "database-zap" \| "database" \| "decimals-arrow-left" \| "decimals-arrow-right" \| "delete" \| "dessert" \| "diameter" \| "diamond-minus" \| "diamond-percent" \| "percent-diamond" \| "diamond-plus" \| "diamond" \| "dice-1" \| "dice-2" \| "dice-3" \| "dice-4" \| "dice-5" \| "dice-6" \| "dices" \| "diff" \| "disc-2" \| "disc-3" \| "disc-album" \| "disc" \| "divide" \| "dna-off" \| "dna" \| "dock" \| "dog" \| "dollar-sign" \| "door-closed-locked" \| "door-closed" \| "door-open" \| "drafting-compass" \| "drama" \| "dribbble" \| "drill" \| "drone" \| "droplet-off" \| "droplet" \| "droplets" \| "drum" \| "drumstick" \| "dumbbell" \| "ear-off" \| "ear" \| "earth-lock" \| "earth" \| "globe-2" \| "eclipse" \| "egg-fried" \| "egg-off" \| "egg" \| "ellipsis-vertical" \| "more-vertical" \| "ellipsis" \| "more-horizontal" \| "equal-approximately" \| "equal-not" \| "equal" \| "eraser" \| "ethernet-port" \| "euro" \| "ev-charger" \| "expand" \| "external-link" \| "eye-closed" \| "eye-off" \| "eye" \| "facebook" \| "factory" \| "fan" \| "fast-forward" \| "feather" \| "fence" \| "ferris-wheel" \| "figma" \| "file-archive" \| "file-axis-3d" \| "file-axis-3-d" \| "file-badge" \| "file-badge-2" \| "file-box" \| "file-braces-corner" \| "file-json-2" \| "file-braces" \| "file-json" \| "file-chart-column-increasing" \| "file-bar-chart" \| "file-chart-column" \| "file-bar-chart-2" \| "file-chart-line" \| "file-line-chart" \| "file-chart-pie" \| "file-pie-chart" \| "file-check-corner" \| "file-check-2" \| "file-check" \| "file-clock" \| "file-code-corner" \| "file-code-2" \| "file-code" \| "file-cog" \| "file-cog-2" \| "file-diff" \| "file-digit" \| "file-down" \| "file-exclamation-point" \| "file-warning" \| "file-headphone" \| "file-audio" \| "file-audio-2" \| "file-heart" \| "file-image" \| "file-input" \| "file-key" \| "file-key-2" \| "file-lock" \| "file-lock-2" \| "file-minus-corner" \| "file-minus-2" \| "file-minus" \| "file-music" \| "file-output" \| "file-pen-line" \| "file-signature" \| "file-pen" \| "file-edit" \| "file-play" \| "file-video" \| "file-plus-corner" \| "file-plus-2" \| "file-plus" \| "file-question-mark" \| "file-question" \| "file-scan" \| "file-search-corner" \| "file-search-2" \| "file-search" \| "file-signal" \| "file-volume-2" \| "file-sliders" \| "file-spreadsheet" \| "file-stack" \| "file-symlink" \| "file-terminal" \| "file-text" \| "file-type-corner" \| "file-type-2" \| "file-type" \| "file-up" \| "file-user" \| "file-video-camera" \| "file-video-2" \| "file-volume" \| "file-x-corner" \| "file-x-2" \| "file-x" \| "film" \| "fingerprint-pattern" \| "fingerprint" \| "fire-extinguisher" \| "fish-off" \| "fish-symbol" \| "fish" \| "fishing-hook" \| "flag-off" \| "flag-triangle-left" \| "flag-triangle-right" \| "flag" \| "flame-kindling" \| "flame" \| "flashlight-off" \| "flashlight" \| "flask-conical-off" \| "flask-conical" \| "flask-round" \| "flip-horizontal-2" \| "flip-horizontal" \| "flip-vertical-2" \| "flip-vertical" \| "flower-2" \| "flower" \| "fold-horizontal" \| "fold-vertical" \| "folder-archive" \| "folder-check" \| "folder-clock" \| "folder-closed" \| "folder-code" \| "folder-cog" \| "folder-cog-2" \| "folder-dot" \| "folder-down" \| "folder-git-2" \| "folder-git" \| "folder-heart" \| "folder-input" \| "folder-kanban" \| "folder-key" \| "folder-lock" \| "folder-minus" \| "folder-open-dot" \| "folder-open" \| "folder-output" \| "folder-pen" \| "folder-edit" \| "folder-plus" \| "folder-root" \| "folder-search-2" \| "folder-search" \| "folder-symlink" \| "folder-sync" \| "folder-tree" \| "folder-up" \| "folder-x" \| "folder" \| "folders" \| "footprints" \| "forklift" \| "forward" \| "frame" \| "framer" \| "frown" \| "fuel" \| "fullscreen" \| "funnel-plus" \| "funnel-x" \| "filter-x" \| "funnel" \| "gallery-horizontal-end" \| "gallery-horizontal" \| "gallery-thumbnails" \| "gallery-vertical-end" \| "gallery-vertical" \| "gamepad-2" \| "gamepad-directional" \| "gamepad" \| "gauge" \| "gavel" \| "gem" \| "georgian-lari" \| "gift" \| "git-branch-minus" \| "git-branch-plus" \| "git-branch" \| "git-commit-horizontal" \| "git-commit" \| "git-commit-vertical" \| "git-compare-arrows" \| "git-compare" \| "git-fork" \| "git-graph" \| "git-merge" \| "git-pull-request-arrow" \| "git-pull-request-closed" \| "git-pull-request-create-arrow" \| "git-pull-request-create" \| "git-pull-request-draft" \| "git-pull-request" \| "github" \| "gitlab" \| "glass-water" \| "glasses" \| "globe-lock" \| "globe" \| "goal" \| "gpu" \| "graduation-cap" \| "grape" \| "grid-2x2-check" \| "grid-2-x-2-check" \| "grid-2x2-plus" \| "grid-2-x-2-plus" \| "grid-2x2-x" \| "grid-2-x-2-x" \| "grid-2x2" \| "grid-2-x-2" \| "grid-3x2" \| "grid-3x3" \| "grid-3-x-3" \| "grip-horizontal" \| "grip-vertical" \| "grip" \| "group" \| "guitar" \| "ham" \| "hamburger" \| "hammer" \| "hand-coins" \| "hand-fist" \| "hand-grab" \| "grab" \| "hand-heart" \| "hand-helping" \| "helping-hand" \| "hand-metal" \| "hand-platter" \| "hand" \| "handbag" \| "handshake" \| "hard-drive-download" \| "hard-drive-upload" \| "hard-drive" \| "hard-hat" \| "hash" \| "hat-glasses" \| "haze" \| "hd" \| "hdmi-port" \| "heading-1" \| "heading-2" \| "heading-3" \| "heading-4" \| "heading-5" \| "heading-6" \| "heading" \| "headphone-off" \| "headphones" \| "headset" \| "heart-crack" \| "heart-handshake" \| "heart-minus" \| "heart-off" \| "heart-plus" \| "heart-pulse" \| "heart" \| "heater" \| "helicopter" \| "hexagon" \| "highlighter" \| "history" \| "hop-off" \| "hop" \| "hospital" \| "hotel" \| "hourglass" \| "house-heart" \| "house-plug" \| "house-plus" \| "house-wifi" \| "house" \| "home" \| "ice-cream-bowl" \| "ice-cream-2" \| "ice-cream-cone" \| "ice-cream" \| "id-card-lanyard" \| "id-card" \| "image-down" \| "image-minus" \| "image-off" \| "image-play" \| "image-plus" \| "image-up" \| "image-upscale" \| "images" \| "import" \| "inbox" \| "indian-rupee" \| "infinity" \| "info" \| "inspection-panel" \| "instagram" \| "italic" \| "iteration-ccw" \| "iteration-cw" \| "japanese-yen" \| "joystick" \| "kanban" \| "kayak" \| "key-round" \| "key-square" \| "key" \| "keyboard-music" \| "keyboard-off" \| "keyboard" \| "lamp-ceiling" \| "lamp-desk" \| "lamp-floor" \| "lamp-wall-down" \| "lamp-wall-up" \| "lamp" \| "land-plot" \| "landmark" \| "languages" \| "laptop-minimal-check" \| "laptop-minimal" \| "laptop-2" \| "laptop" \| "lasso-select" \| "lasso" \| "laugh" \| "layers-2" \| "layers-plus" \| "layers" \| "layers-3" \| "layout-dashboard" \| "layout-grid" \| "layout-list" \| "layout-panel-left" \| "layout-panel-top" \| "layout-template" \| "leaf" \| "leafy-green" \| "lectern" \| "library-big" \| "library" \| "life-buoy" \| "ligature" \| "lightbulb-off" \| "lightbulb" \| "line-squiggle" \| "link-2-off" \| "link-2" \| "linkedin" \| "list-check" \| "list-checks" \| "list-chevrons-down-up" \| "list-chevrons-up-down" \| "list-collapse" \| "list-end" \| "list-filter-plus" \| "list-filter" \| "list-indent-decrease" \| "outdent" \| "indent-decrease" \| "list-indent-increase" \| "indent" \| "indent-increase" \| "list-minus" \| "list-music" \| "list-ordered" \| "list-plus" \| "list-restart" \| "list-start" \| "list-todo" \| "list-tree" \| "list-video" \| "list-x" \| "loader-circle" \| "loader-2" \| "loader-pinwheel" \| "loader" \| "locate-fixed" \| "locate-off" \| "locate" \| "lock-keyhole-open" \| "unlock-keyhole" \| "lock-keyhole" \| "lock-open" \| "unlock" \| "lock" \| "log-in" \| "log-out" \| "logs" \| "lollipop" \| "luggage" \| "magnet" \| "mail-check" \| "mail-minus" \| "mail-open" \| "mail-plus" \| "mail-question-mark" \| "mail-question" \| "mail-search" \| "mail-warning" \| "mail-x" \| "mail" \| "mailbox" \| "mails" \| "map-minus" \| "map-pin-check-inside" \| "map-pin-check" \| "map-pin-house" \| "map-pin-minus-inside" \| "map-pin-minus" \| "map-pin-off" \| "map-pin-pen" \| "location-edit" \| "map-pin-plus-inside" \| "map-pin-plus" \| "map-pin-x-inside" \| "map-pin-x" \| "map-pin" \| "map-pinned" \| "map-plus" \| "mars-stroke" \| "mars" \| "martini" \| "maximize-2" \| "maximize" \| "medal" \| "megaphone-off" \| "megaphone" \| "meh" \| "memory-stick" \| "merge" \| "message-circle-code" \| "message-circle-dashed" \| "message-circle-heart" \| "message-circle-more" \| "message-circle-off" \| "message-circle-plus" \| "message-circle-question-mark" \| "message-circle-question" \| "message-circle-reply" \| "message-circle-warning" \| "message-circle-x" \| "message-circle" \| "message-square-code" \| "message-square-dashed" \| "message-square-diff" \| "message-square-dot" \| "message-square-heart" \| "message-square-lock" \| "message-square-more" \| "message-square-off" \| "message-square-plus" \| "message-square-quote" \| "message-square-reply" \| "message-square-share" \| "message-square-text" \| "message-square-warning" \| "message-square-x" \| "message-square" \| "messages-square" \| "mic-off" \| "mic-vocal" \| "mic-2" \| "mic" \| "microchip" \| "microscope" \| "microwave" \| "milestone" \| "milk-off" \| "milk" \| "minimize-2" \| "minimize" \| "minus" \| "monitor-check" \| "monitor-cloud" \| "monitor-cog" \| "monitor-dot" \| "monitor-down" \| "monitor-off" \| "monitor-pause" \| "monitor-play" \| "monitor-smartphone" \| "monitor-speaker" \| "monitor-stop" \| "monitor-up" \| "monitor-x" \| "monitor" \| "moon-star" \| "moon" \| "motorbike" \| "mountain-snow" \| "mountain" \| "mouse-off" \| "mouse-pointer-2-off" \| "mouse-pointer-2" \| "mouse-pointer-ban" \| "mouse-pointer-click" \| "mouse-pointer" \| "mouse" \| "move-3d" \| "move-3-d" \| "move-diagonal-2" \| "move-diagonal" \| "move-down-left" \| "move-down-right" \| "move-down" \| "move-horizontal" \| "move-left" \| "move-right" \| "move-up-left" \| "move-up-right" \| "move-up" \| "move-vertical" \| "move" \| "music-2" \| "music-3" \| "music-4" \| "music" \| "navigation-2-off" \| "navigation-2" \| "navigation-off" \| "navigation" \| "network" \| "newspaper" \| "nfc" \| "non-binary" \| "notebook-pen" \| "notebook-tabs" \| "notebook-text" \| "notebook" \| "notepad-text-dashed" \| "notepad-text" \| "nut-off" \| "nut" \| "octagon-alert" \| "alert-octagon" \| "octagon-minus" \| "octagon-pause" \| "pause-octagon" \| "octagon-x" \| "x-octagon" \| "octagon" \| "omega" \| "orbit" \| "origami" \| "package-2" \| "package-check" \| "package-minus" \| "package-open" \| "package-plus" \| "package-search" \| "package-x" \| "package" \| "paint-bucket" \| "paint-roller" \| "paintbrush-vertical" \| "paintbrush-2" \| "paintbrush" \| "palette" \| "panda" \| "panel-bottom-close" \| "panel-bottom-dashed" \| "panel-bottom-inactive" \| "panel-bottom-open" \| "panel-bottom" \| "panel-left-close" \| "sidebar-close" \| "panel-left-dashed" \| "panel-left-inactive" \| "panel-left-open" \| "sidebar-open" \| "panel-left-right-dashed" \| "panel-left" \| "sidebar" \| "panel-right-close" \| "panel-right-dashed" \| "panel-right-inactive" \| "panel-right-open" \| "panel-right" \| "panel-top-bottom-dashed" \| "panel-top-close" \| "panel-top-dashed" \| "panel-top-inactive" \| "panel-top-open" \| "panel-top" \| "panels-left-bottom" \| "panels-right-bottom" \| "panels-top-left" \| "layout" \| "paperclip" \| "parentheses" \| "parking-meter" \| "party-popper" \| "pause" \| "paw-print" \| "pc-case" \| "pen-line" \| "edit-3" \| "pen-off" \| "pen-tool" \| "pen" \| "edit-2" \| "pencil-line" \| "pencil-off" \| "pencil-ruler" \| "pencil" \| "pentagon" \| "percent" \| "person-standing" \| "philippine-peso" \| "phone-call" \| "phone-forwarded" \| "phone-incoming" \| "phone-missed" \| "phone-off" \| "phone-outgoing" \| "phone" \| "pi" \| "piano" \| "pickaxe" \| "picture-in-picture-2" \| "picture-in-picture" \| "piggy-bank" \| "pilcrow-left" \| "pilcrow-right" \| "pilcrow" \| "pill-bottle" \| "pin-off" \| "pin" \| "pipette" \| "pizza" \| "plane-landing" \| "plane-takeoff" \| "plane" \| "play" \| "plug-2" \| "plug-zap" \| "plug-zap-2" \| "plug" \| "plus" \| "pocket-knife" \| "pocket" \| "podcast" \| "pointer-off" \| "pointer" \| "popcorn" \| "popsicle" \| "pound-sterling" \| "power-off" \| "power" \| "presentation" \| "printer-check" \| "printer" \| "projector" \| "proportions" \| "puzzle" \| "pyramid" \| "qr-code" \| "quote" \| "rabbit" \| "radar" \| "radiation" \| "radical" \| "radio-receiver" \| "radio-tower" \| "radio" \| "radius" \| "rail-symbol" \| "rainbow" \| "rat" \| "receipt-cent" \| "receipt-euro" \| "receipt-indian-rupee" \| "receipt-japanese-yen" \| "receipt-pound-sterling" \| "receipt-russian-ruble" \| "receipt-swiss-franc" \| "receipt-text" \| "receipt-turkish-lira" \| "receipt" \| "rectangle-circle" \| "rectangle-ellipsis" \| "form-input" \| "rectangle-goggles" \| "rectangle-horizontal" \| "rectangle-vertical" \| "recycle" \| "redo-2" \| "redo-dot" \| "redo" \| "refresh-ccw-dot" \| "refresh-ccw" \| "refresh-cw-off" \| "refresh-cw" \| "refrigerator" \| "regex" \| "remove-formatting" \| "repeat-1" \| "repeat-2" \| "replace-all" \| "replace" \| "reply-all" \| "reply" \| "rewind" \| "ribbon" \| "rocket" \| "rocking-chair" \| "roller-coaster" \| "rose" \| "rotate-3d" \| "rotate-3-d" \| "rotate-ccw-key" \| "rotate-ccw-square" \| "rotate-ccw" \| "rotate-cw-square" \| "rotate-cw" \| "route-off" \| "route" \| "router" \| "rows-2" \| "rows-3" \| "panels-top-bottom" \| "rows-4" \| "rss" \| "ruler-dimension-line" \| "ruler" \| "russian-ruble" \| "sailboat" \| "salad" \| "sandwich" \| "satellite-dish" \| "satellite" \| "saudi-riyal" \| "save-all" \| "save-off" \| "save" \| "scale-3d" \| "scale-3-d" \| "scaling" \| "scan-barcode" \| "scan-eye" \| "scan-face" \| "scan-heart" \| "scan-line" \| "scan-qr-code" \| "scan-search" \| "scan-text" \| "scan" \| "school" \| "scissors-line-dashed" \| "scissors" \| "scooter" \| "screen-share-off" \| "screen-share" \| "scroll-text" \| "search-alert" \| "search-check" \| "search-code" \| "search-slash" \| "search-x" \| "send-horizontal" \| "send-horizonal" \| "send-to-back" \| "send" \| "separator-horizontal" \| "separator-vertical" \| "server-cog" \| "server-crash" \| "server-off" \| "server" \| "settings-2" \| "settings" \| "shapes" \| "share-2" \| "share" \| "sheet" \| "shell" \| "shield-alert" \| "shield-ban" \| "shield-check" \| "shield-ellipsis" \| "shield-half" \| "shield-minus" \| "shield-off" \| "shield-plus" \| "shield-question-mark" \| "shield-question" \| "shield-user" \| "shield-x" \| "shield-close" \| "shield" \| "ship-wheel" \| "ship" \| "shirt" \| "shopping-bag" \| "shopping-basket" \| "shopping-cart" \| "shovel" \| "shower-head" \| "shredder" \| "shrimp" \| "shrink" \| "shrub" \| "shuffle" \| "sigma" \| "signal-high" \| "signal-low" \| "signal-medium" \| "signal-zero" \| "signal" \| "signature" \| "signpost-big" \| "signpost" \| "siren" \| "skip-back" \| "skip-forward" \| "skull" \| "slack" \| "slash" \| "slice" \| "sliders-horizontal" \| "sliders-vertical" \| "sliders" \| "smartphone-charging" \| "smartphone-nfc" \| "smartphone" \| "smile-plus" \| "smile" \| "snail" \| "snowflake" \| "soap-dispenser-droplet" \| "sofa" \| "solar-panel" \| "soup" \| "spade" \| "sparkle" \| "sparkles" \| "stars" \| "speaker" \| "speech" \| "spell-check-2" \| "spell-check" \| "spline-pointer" \| "spline" \| "split" \| "spool" \| "spotlight" \| "spray-can" \| "sprout" \| "square-activity" \| "activity-square" \| "square-arrow-down-left" \| "arrow-down-left-square" \| "square-arrow-down-right" \| "arrow-down-right-square" \| "square-arrow-down" \| "arrow-down-square" \| "square-arrow-left" \| "arrow-left-square" \| "square-arrow-out-down-left" \| "arrow-down-left-from-square" \| "square-arrow-out-down-right" \| "arrow-down-right-from-square" \| "square-arrow-out-up-left" \| "arrow-up-left-from-square" \| "square-arrow-out-up-right" \| "arrow-up-right-from-square" \| "square-arrow-right" \| "arrow-right-square" \| "square-arrow-up-left" \| "arrow-up-left-square" \| "square-arrow-up-right" \| "arrow-up-right-square" \| "square-arrow-up" \| "arrow-up-square" \| "square-asterisk" \| "asterisk-square" \| "square-bottom-dashed-scissors" \| "scissors-square-dashed-bottom" \| "square-chart-gantt" \| "gantt-chart-square" \| "square-gantt-chart" \| "square-check-big" \| "check-square" \| "square-check" \| "check-square-2" \| "square-chevron-down" \| "chevron-down-square" \| "square-chevron-left" \| "chevron-left-square" \| "square-chevron-right" \| "chevron-right-square" \| "square-chevron-up" \| "chevron-up-square" \| "square-code" \| "code-square" \| "square-dashed-bottom-code" \| "square-dashed-bottom" \| "square-dashed-kanban" \| "kanban-square-dashed" \| "square-dashed-mouse-pointer" \| "mouse-pointer-square-dashed" \| "square-dashed-top-solid" \| "square-dashed" \| "box-select" \| "square-divide" \| "divide-square" \| "square-dot" \| "dot-square" \| "square-equal" \| "equal-square" \| "square-function" \| "function-square" \| "square-kanban" \| "kanban-square" \| "square-library" \| "library-square" \| "square-m" \| "m-square" \| "square-menu" \| "menu-square" \| "square-minus" \| "minus-square" \| "square-mouse-pointer" \| "inspect" \| "square-parking-off" \| "parking-square-off" \| "square-parking" \| "parking-square" \| "square-pause" \| "square-pen" \| "pen-box" \| "edit" \| "pen-square" \| "square-percent" \| "percent-square" \| "square-pi" \| "pi-square" \| "square-pilcrow" \| "pilcrow-square" \| "square-play" \| "play-square" \| "square-plus" \| "plus-square" \| "square-power" \| "power-square" \| "square-radical" \| "square-round-corner" \| "square-scissors" \| "scissors-square" \| "square-sigma" \| "sigma-square" \| "square-slash" \| "slash-square" \| "square-split-horizontal" \| "split-square-horizontal" \| "square-split-vertical" \| "split-square-vertical" \| "square-square" \| "square-stack" \| "square-star" \| "square-stop" \| "square-terminal" \| "terminal-square" \| "square-user-round" \| "user-square-2" \| "square-user" \| "user-square" \| "square-x" \| "x-square" \| "squares-exclude" \| "squares-intersect" \| "squares-subtract" \| "squares-unite" \| "squircle-dashed" \| "squircle" \| "squirrel" \| "stamp" \| "star-half" \| "star-off" \| "star" \| "step-back" \| "step-forward" \| "stethoscope" \| "sticker" \| "sticky-note" \| "stone" \| "store" \| "stretch-horizontal" \| "stretch-vertical" \| "strikethrough" \| "subscript" \| "sun-dim" \| "sun-medium" \| "sun-moon" \| "sun-snow" \| "sun" \| "sunrise" \| "sunset" \| "superscript" \| "swatch-book" \| "swiss-franc" \| "switch-camera" \| "sword" \| "swords" \| "syringe" \| "table-2" \| "table-cells-merge" \| "table-cells-split" \| "table-columns-split" \| "table-of-contents" \| "table-properties" \| "table-rows-split" \| "tablet-smartphone" \| "tablet" \| "tablets" \| "tag" \| "tags" \| "tally-1" \| "tally-2" \| "tally-3" \| "tally-4" \| "tally-5" \| "tangent" \| "telescope" \| "tent-tree" \| "tent" \| "terminal" \| "test-tube-diagonal" \| "test-tube-2" \| "test-tube" \| "test-tubes" \| "text-align-center" \| "align-center" \| "text-align-end" \| "align-right" \| "text-align-justify" \| "align-justify" \| "text-align-start" \| "align-left" \| "text-cursor-input" \| "text-cursor" \| "text-initial" \| "letter-text" \| "text-quote" \| "text-search" \| "text-select" \| "text-selection" \| "text-wrap" \| "wrap-text" \| "theater" \| "thermometer-snowflake" \| "thermometer-sun" \| "thermometer" \| "thumbs-down" \| "thumbs-up" \| "ticket-check" \| "ticket-minus" \| "ticket-percent" \| "ticket-plus" \| "ticket-slash" \| "ticket-x" \| "ticket" \| "tickets-plane" \| "tickets" \| "timer-off" \| "timer-reset" \| "timer" \| "toggle-left" \| "toggle-right" \| "toilet" \| "tool-case" \| "toolbox" \| "tornado" \| "torus" \| "touchpad-off" \| "touchpad" \| "tower-control" \| "toy-brick" \| "tractor" \| "traffic-cone" \| "train-front-tunnel" \| "train-front" \| "train-track" \| "tram-front" \| "train" \| "transgender" \| "trash-2" \| "trash" \| "tree-deciduous" \| "tree-palm" \| "palmtree" \| "tree-pine" \| "trees" \| "trello" \| "trending-down" \| "trending-up-down" \| "trending-up" \| "triangle-alert" \| "alert-triangle" \| "triangle-dashed" \| "triangle-right" \| "trophy" \| "truck-electric" \| "truck" \| "turkish-lira" \| "turntable" \| "turtle" \| "tv-minimal-play" \| "tv-minimal" \| "tv-2" \| "tv" \| "twitch" \| "twitter" \| "type-outline" \| "umbrella-off" \| "umbrella" \| "undo-2" \| "undo-dot" \| "undo" \| "unfold-horizontal" \| "unfold-vertical" \| "ungroup" \| "university" \| "school-2" \| "unlink-2" \| "unlink" \| "unplug" \| "upload" \| "usb" \| "user-check" \| "user-cog" \| "user-lock" \| "user-minus" \| "user-pen" \| "user-plus" \| "user-round-check" \| "user-check-2" \| "user-round-cog" \| "user-cog-2" \| "user-round-minus" \| "user-minus-2" \| "user-round-pen" \| "user-round-plus" \| "user-plus-2" \| "user-round-search" \| "user-round-x" \| "user-x-2" \| "user-round" \| "user-2" \| "user-search" \| "user-star" \| "user-x" \| "user" \| "users-round" \| "users-2" \| "users" \| "utensils-crossed" \| "fork-knife-crossed" \| "utensils" \| "fork-knife" \| "utility-pole" \| "van" \| "variable" \| "vault" \| "vector-square" \| "vegan" \| "venetian-mask" \| "venus-and-mars" \| "venus" \| "vibrate-off" \| "vibrate" \| "video-off" \| "videotape" \| "voicemail" \| "volleyball" \| "volume-1" \| "volume-2" \| "volume-off" \| "volume-x" \| "volume" \| "vote" \| "wallet-cards" \| "wallet-minimal" \| "wallet-2" \| "wallet" \| "wallpaper" \| "wand-sparkles" \| "wand-2" \| "wand" \| "warehouse" \| "washing-machine" \| "watch" \| "waves-arrow-down" \| "waves-arrow-up" \| "waves-ladder" \| "waves" \| "waypoints" \| "webcam" \| "webhook-off" \| "webhook" \| "weight-tilde" \| "weight" \| "wheat-off" \| "wheat" \| "whole-word" \| "wifi-cog" \| "wifi-high" \| "wifi-low" \| "wifi-off" \| "wifi-pen" \| "wifi-sync" \| "wifi-zero" \| "wifi" \| "wind-arrow-down" \| "wind" \| "wine-off" \| "wine" \| "workflow" \| "worm" \| "wrench" \| "youtube" \| "zap-off" \| "zap" \| "zoom-in" \| "zoom-out"` `"ratio"``"target"``"form"``"rows"``"list"``"download"``"blend"``"type"``"filter"``"scale"``"x"``"columns"``"container"``"grid"``"code"``"link"``"map"``"menu"``"option"``"search"``"section"``"table"``"video"``"circle"``"image"``"text"``"view"``"square"``"pill"``"triangle"``"repeat"``"space"``"scroll"``"focus"``"ghost"``"files"``"file"``"underline"``"dot"``"donut"``"a-arrow-down"``"a-arrow-up"``"a-large-small"``"accessibility"``"activity"``"air-vent"``"airplay"``"alarm-clock-check"``"alarm-check"``"alarm-clock-minus"``"alarm-minus"``"alarm-clock-off"``"alarm-clock-plus"``"alarm-plus"``"alarm-clock"``"alarm-smoke"``"album"``"align-center-horizontal"``"align-center-vertical"``"align-end-horizontal"``"align-end-vertical"``"align-horizontal-distribute-center"``"align-horizontal-distribute-end"``"align-horizontal-distribute-start"``"align-horizontal-justify-center"``"align-horizontal-justify-end"``"align-horizontal-justify-start"``"align-horizontal-space-around"``"align-horizontal-space-between"``"align-start-horizontal"``"align-start-vertical"``"align-vertical-distribute-center"``"align-vertical-distribute-end"``"align-vertical-distribute-start"``"align-vertical-justify-center"``"align-vertical-justify-end"``"align-vertical-justify-start"``"align-vertical-space-around"``"align-vertical-space-between"``"ambulance"``"ampersand"``"ampersands"``"amphora"``"anchor"``"angry"``"annoyed"``"antenna"``"anvil"``"aperture"``"app-window-mac"``"app-window"``"apple"``"archive-restore"``"archive-x"``"archive"``"armchair"``"arrow-big-down-dash"``"arrow-big-down"``"arrow-big-left-dash"``"arrow-big-left"``"arrow-big-right-dash"``"arrow-big-right"``"arrow-big-up-dash"``"arrow-big-up"``"arrow-down-0-1"``"arrow-down-01"``"arrow-down-1-0"``"arrow-down-10"``"arrow-down-a-z"``"arrow-down-az"``"arrow-down-from-line"``"arrow-down-left"``"arrow-down-narrow-wide"``"arrow-down-right"``"arrow-down-to-dot"``"arrow-down-to-line"``"arrow-down-up"``"arrow-down-wide-narrow"``"sort-desc"``"arrow-down-z-a"``"arrow-down-za"``"arrow-down"``"arrow-left-from-line"``"arrow-left-right"``"arrow-left-to-line"``"arrow-left"``"arrow-right-from-line"``"arrow-right-left"``"arrow-right-to-line"``"arrow-right"``"arrow-up-0-1"``"arrow-up-01"``"arrow-up-1-0"``"arrow-up-10"``"arrow-up-a-z"``"arrow-up-az"``"arrow-up-down"``"arrow-up-from-dot"``"arrow-up-from-line"``"arrow-up-left"``"arrow-up-narrow-wide"``"sort-asc"``"arrow-up-right"``"arrow-up-to-line"``"arrow-up-wide-narrow"``"arrow-up-z-a"``"arrow-up-za"``"arrow-up"``"arrows-up-from-line"``"asterisk"``"at-sign"``"atom"``"audio-lines"``"audio-waveform"``"award"``"axe"``"axis-3d"``"axis-3-d"``"baby"``"backpack"``"badge-alert"``"badge-cent"``"badge-check"``"verified"``"badge-dollar-sign"``"badge-euro"``"badge-indian-rupee"``"badge-info"``"badge-japanese-yen"``"badge-minus"``"badge-percent"``"badge-plus"``"badge-pound-sterling"``"badge-question-mark"``"badge-help"``"badge-russian-ruble"``"badge-swiss-franc"``"badge-turkish-lira"``"badge-x"``"badge"``"baggage-claim"``"balloon"``"ban"``"banana"``"bandage"``"banknote-arrow-down"``"banknote-arrow-up"``"banknote-x"``"banknote"``"barcode"``"barrel"``"baseline"``"bath"``"battery-charging"``"battery-full"``"battery-low"``"battery-medium"``"battery-plus"``"battery-warning"``"battery"``"beaker"``"bean-off"``"bean"``"bed-double"``"bed-single"``"bed"``"beef"``"beer-off"``"beer"``"bell-dot"``"bell-electric"``"bell-minus"``"bell-off"``"bell-plus"``"bell-ring"``"bell"``"between-horizontal-end"``"between-horizonal-end"``"between-horizontal-start"``"between-horizonal-start"``"between-vertical-end"``"between-vertical-start"``"biceps-flexed"``"bike"``"binary"``"binoculars"``"biohazard"``"bird"``"birdhouse"``"bitcoin"``"blinds"``"blocks"``"bluetooth-connected"``"bluetooth-off"``"bluetooth-searching"``"bluetooth"``"bold"``"bolt"``"bomb"``"bone"``"book-a"``"book-alert"``"book-audio"``"book-check"``"book-copy"``"book-dashed"``"book-template"``"book-down"``"book-headphones"``"book-heart"``"book-image"``"book-key"``"book-lock"``"book-marked"``"book-minus"``"book-open-check"``"book-open-text"``"book-open"``"book-plus"``"book-search"``"book-text"``"book-type"``"book-up-2"``"book-up"``"book-user"``"book-x"``"book"``"bookmark-check"``"bookmark-minus"``"bookmark-plus"``"bookmark-x"``"bookmark"``"boom-box"``"bot-message-square"``"bot-off"``"bot"``"bottle-wine"``"bow-arrow"``"box"``"boxes"``"braces"``"curly-braces"``"brackets"``"brain-circuit"``"brain-cog"``"brain"``"brick-wall-fire"``"brick-wall-shield"``"brick-wall"``"briefcase-business"``"briefcase-conveyor-belt"``"briefcase-medical"``"briefcase"``"bring-to-front"``"brush-cleaning"``"brush"``"bubbles"``"bug-off"``"bug-play"``"bug"``"building-2"``"building"``"bus-front"``"bus"``"cable-car"``"cable"``"cake-slice"``"cake"``"calculator"``"calendar-1"``"calendar-arrow-down"``"calendar-arrow-up"``"calendar-check-2"``"calendar-check"``"calendar-clock"``"calendar-cog"``"calendar-days"``"calendar-fold"``"calendar-heart"``"calendar-minus-2"``"calendar-minus"``"calendar-off"``"calendar-plus-2"``"calendar-plus"``"calendar-range"``"calendar-search"``"calendar-sync"``"calendar-x-2"``"calendar-x"``"calendar"``"calendars"``"camera-off"``"camera"``"candy-cane"``"candy-off"``"candy"``"cannabis-off"``"cannabis"``"captions-off"``"captions"``"subtitles"``"car-front"``"car-taxi-front"``"car"``"caravan"``"card-sim"``"carrot"``"case-lower"``"case-sensitive"``"case-upper"``"cassette-tape"``"cast"``"castle"``"cat"``"cctv"``"chart-area"``"area-chart"``"chart-bar-big"``"bar-chart-horizontal-big"``"chart-bar-decreasing"``"chart-bar-increasing"``"chart-bar-stacked"``"chart-bar"``"bar-chart-horizontal"``"chart-candlestick"``"candlestick-chart"``"chart-column-big"``"bar-chart-big"``"chart-column-decreasing"``"chart-column-increasing"``"bar-chart-4"``"chart-column-stacked"``"chart-column"``"bar-chart-3"``"chart-gantt"``"chart-line"``"line-chart"``"chart-network"``"chart-no-axes-column-decreasing"``"chart-no-axes-column-increasing"``"bar-chart"``"chart-no-axes-column"``"bar-chart-2"``"chart-no-axes-combined"``"chart-no-axes-gantt"``"gantt-chart"``"chart-pie"``"pie-chart"``"chart-scatter"``"scatter-chart"``"chart-spline"``"check-check"``"check-line"``"check"``"chef-hat"``"cherry"``"chess-bishop"``"chess-king"``"chess-knight"``"chess-pawn"``"chess-queen"``"chess-rook"``"chevron-down"``"chevron-first"``"chevron-last"``"chevron-left"``"chevron-right"``"chevron-up"``"chevrons-down-up"``"chevrons-down"``"chevrons-left-right-ellipsis"``"chevrons-left-right"``"chevrons-left"``"chevrons-right-left"``"chevrons-right"``"chevrons-up-down"``"chevrons-up"``"chromium"``"chrome"``"church"``"cigarette-off"``"cigarette"``"circle-alert"``"alert-circle"``"circle-arrow-down"``"arrow-down-circle"``"circle-arrow-left"``"arrow-left-circle"``"circle-arrow-out-down-left"``"arrow-down-left-from-circle"``"circle-arrow-out-down-right"``"arrow-down-right-from-circle"``"circle-arrow-out-up-left"``"arrow-up-left-from-circle"``"circle-arrow-out-up-right"``"arrow-up-right-from-circle"``"circle-arrow-right"``"arrow-right-circle"``"circle-arrow-up"``"arrow-up-circle"``"circle-check-big"``"check-circle"``"circle-check"``"check-circle-2"``"circle-chevron-down"``"chevron-down-circle"``"circle-chevron-left"``"chevron-left-circle"``"circle-chevron-right"``"chevron-right-circle"``"circle-chevron-up"``"chevron-up-circle"``"circle-dashed"``"circle-divide"``"divide-circle"``"circle-dollar-sign"``"circle-dot-dashed"``"circle-dot"``"circle-ellipsis"``"circle-equal"``"circle-fading-arrow-up"``"circle-fading-plus"``"circle-gauge"``"gauge-circle"``"circle-minus"``"minus-circle"``"circle-off"``"circle-parking-off"``"parking-circle-off"``"circle-parking"``"parking-circle"``"circle-pause"``"pause-circle"``"circle-percent"``"percent-circle"``"circle-pile"``"circle-play"``"play-circle"``"circle-plus"``"plus-circle"``"circle-pound-sterling"``"circle-power"``"power-circle"``"circle-question-mark"``"help-circle"``"circle-help"``"circle-slash-2"``"circle-slashed"``"circle-slash"``"circle-small"``"circle-star"``"circle-stop"``"stop-circle"``"circle-user-round"``"user-circle-2"``"circle-user"``"user-circle"``"circle-x"``"x-circle"``"circuit-board"``"citrus"``"clapperboard"``"clipboard-check"``"clipboard-clock"``"clipboard-copy"``"clipboard-list"``"clipboard-minus"``"clipboard-paste"``"clipboard-pen-line"``"clipboard-signature"``"clipboard-pen"``"clipboard-edit"``"clipboard-plus"``"clipboard-type"``"clipboard-x"``"clipboard"``"clock-1"``"clock-10"``"clock-11"``"clock-12"``"clock-2"``"clock-3"``"clock-4"``"clock-5"``"clock-6"``"clock-7"``"clock-8"``"clock-9"``"clock-alert"``"clock-arrow-down"``"clock-arrow-up"``"clock-check"``"clock-fading"``"clock-plus"``"clock"``"closed-caption"``"cloud-alert"``"cloud-backup"``"cloud-check"``"cloud-cog"``"cloud-download"``"download-cloud"``"cloud-drizzle"``"cloud-fog"``"cloud-hail"``"cloud-lightning"``"cloud-moon-rain"``"cloud-moon"``"cloud-off"``"cloud-rain-wind"``"cloud-rain"``"cloud-snow"``"cloud-sun-rain"``"cloud-sun"``"cloud-sync"``"cloud-upload"``"upload-cloud"``"cloud"``"cloudy"``"clover"``"club"``"code-xml"``"code-2"``"codepen"``"codesandbox"``"coffee"``"cog"``"coins"``"columns-2"``"columns-3-cog"``"columns-settings"``"table-config"``"columns-3"``"panels-left-right"``"columns-4"``"combine"``"command"``"compass"``"component"``"computer"``"concierge-bell"``"cone"``"construction"``"contact-round"``"contact-2"``"contact"``"contrast"``"cookie"``"cooking-pot"``"copy-check"``"copy-minus"``"copy-plus"``"copy-slash"``"copy-x"``"copy"``"copyleft"``"copyright"``"corner-down-left"``"corner-down-right"``"corner-left-down"``"corner-left-up"``"corner-right-down"``"corner-right-up"``"corner-up-left"``"corner-up-right"``"cpu"``"creative-commons"``"credit-card"``"croissant"``"crop"``"cross"``"crosshair"``"crown"``"cuboid"``"cup-soda"``"currency"``"cylinder"``"dam"``"database-backup"``"database-zap"``"database"``"decimals-arrow-left"``"decimals-arrow-right"``"delete"``"dessert"``"diameter"``"diamond-minus"``"diamond-percent"``"percent-diamond"``"diamond-plus"``"diamond"``"dice-1"``"dice-2"``"dice-3"``"dice-4"``"dice-5"``"dice-6"``"dices"``"diff"``"disc-2"``"disc-3"``"disc-album"``"disc"``"divide"``"dna-off"``"dna"``"dock"``"dog"``"dollar-sign"``"door-closed-locked"``"door-closed"``"door-open"``"drafting-compass"``"drama"``"dribbble"``"drill"``"drone"``"droplet-off"``"droplet"``"droplets"``"drum"``"drumstick"``"dumbbell"``"ear-off"``"ear"``"earth-lock"``"earth"``"globe-2"``"eclipse"``"egg-fried"``"egg-off"``"egg"``"ellipsis-vertical"``"more-vertical"``"ellipsis"``"more-horizontal"``"equal-approximately"``"equal-not"``"equal"``"eraser"``"ethernet-port"``"euro"``"ev-charger"``"expand"``"external-link"``"eye-closed"``"eye-off"``"eye"``"facebook"``"factory"``"fan"``"fast-forward"``"feather"``"fence"``"ferris-wheel"``"figma"``"file-archive"``"file-axis-3d"``"file-axis-3-d"``"file-badge"``"file-badge-2"``"file-box"``"file-braces-corner"``"file-json-2"``"file-braces"``"file-json"``"file-chart-column-increasing"``"file-bar-chart"``"file-chart-column"``"file-bar-chart-2"``"file-chart-line"``"file-line-chart"``"file-chart-pie"``"file-pie-chart"``"file-check-corner"``"file-check-2"``"file-check"``"file-clock"``"file-code-corner"``"file-code-2"``"file-code"``"file-cog"``"file-cog-2"``"file-diff"``"file-digit"``"file-down"``"file-exclamation-point"``"file-warning"``"file-headphone"``"file-audio"``"file-audio-2"``"file-heart"``"file-image"``"file-input"``"file-key"``"file-key-2"``"file-lock"``"file-lock-2"``"file-minus-corner"``"file-minus-2"``"file-minus"``"file-music"``"file-output"``"file-pen-line"``"file-signature"``"file-pen"``"file-edit"``"file-play"``"file-video"``"file-plus-corner"``"file-plus-2"``"file-plus"``"file-question-mark"``"file-question"``"file-scan"``"file-search-corner"``"file-search-2"``"file-search"``"file-signal"``"file-volume-2"``"file-sliders"``"file-spreadsheet"``"file-stack"``"file-symlink"``"file-terminal"``"file-text"``"file-type-corner"``"file-type-2"``"file-type"``"file-up"``"file-user"``"file-video-camera"``"file-video-2"``"file-volume"``"file-x-corner"``"file-x-2"``"file-x"``"film"``"fingerprint-pattern"``"fingerprint"``"fire-extinguisher"``"fish-off"``"fish-symbol"``"fish"``"fishing-hook"``"flag-off"``"flag-triangle-left"``"flag-triangle-right"``"flag"``"flame-kindling"``"flame"``"flashlight-off"``"flashlight"``"flask-conical-off"``"flask-conical"``"flask-round"``"flip-horizontal-2"``"flip-horizontal"``"flip-vertical-2"``"flip-vertical"``"flower-2"``"flower"``"fold-horizontal"``"fold-vertical"``"folder-archive"``"folder-check"``"folder-clock"``"folder-closed"``"folder-code"``"folder-cog"``"folder-cog-2"``"folder-dot"``"folder-down"``"folder-git-2"``"folder-git"``"folder-heart"``"folder-input"``"folder-kanban"``"folder-key"``"folder-lock"``"folder-minus"``"folder-open-dot"``"folder-open"``"folder-output"``"folder-pen"``"folder-edit"``"folder-plus"``"folder-root"``"folder-search-2"``"folder-search"``"folder-symlink"``"folder-sync"``"folder-tree"``"folder-up"``"folder-x"``"folder"``"folders"``"footprints"``"forklift"``"forward"``"frame"``"framer"``"frown"``"fuel"``"fullscreen"``"funnel-plus"``"funnel-x"``"filter-x"``"funnel"``"gallery-horizontal-end"``"gallery-horizontal"``"gallery-thumbnails"``"gallery-vertical-end"``"gallery-vertical"``"gamepad-2"``"gamepad-directional"``"gamepad"``"gauge"``"gavel"``"gem"``"georgian-lari"``"gift"``"git-branch-minus"``"git-branch-plus"``"git-branch"``"git-commit-horizontal"``"git-commit"``"git-commit-vertical"``"git-compare-arrows"``"git-compare"``"git-fork"``"git-graph"``"git-merge"``"git-pull-request-arrow"``"git-pull-request-closed"``"git-pull-request-create-arrow"``"git-pull-request-create"``"git-pull-request-draft"``"git-pull-request"``"github"``"gitlab"``"glass-water"``"glasses"``"globe-lock"``"globe"``"goal"``"gpu"``"graduation-cap"``"grape"``"grid-2x2-check"``"grid-2-x-2-check"``"grid-2x2-plus"``"grid-2-x-2-plus"``"grid-2x2-x"``"grid-2-x-2-x"``"grid-2x2"``"grid-2-x-2"``"grid-3x2"``"grid-3x3"``"grid-3-x-3"``"grip-horizontal"``"grip-vertical"``"grip"``"group"``"guitar"``"ham"``"hamburger"``"hammer"``"hand-coins"``"hand-fist"``"hand-grab"``"grab"``"hand-heart"``"hand-helping"``"helping-hand"``"hand-metal"``"hand-platter"``"hand"``"handbag"``"handshake"``"hard-drive-download"``"hard-drive-upload"``"hard-drive"``"hard-hat"``"hash"``"hat-glasses"``"haze"``"hd"``"hdmi-port"``"heading-1"``"heading-2"``"heading-3"``"heading-4"``"heading-5"``"heading-6"``"heading"``"headphone-off"``"headphones"``"headset"``"heart-crack"``"heart-handshake"``"heart-minus"``"heart-off"``"heart-plus"``"heart-pulse"``"heart"``"heater"``"helicopter"``"hexagon"``"highlighter"``"history"``"hop-off"``"hop"``"hospital"``"hotel"``"hourglass"``"house-heart"``"house-plug"``"house-plus"``"house-wifi"``"house"``"home"``"ice-cream-bowl"``"ice-cream-2"``"ice-cream-cone"``"ice-cream"``"id-card-lanyard"``"id-card"``"image-down"``"image-minus"``"image-off"``"image-play"``"image-plus"``"image-up"``"image-upscale"``"images"``"import"``"inbox"``"indian-rupee"``"infinity"``"info"``"inspection-panel"``"instagram"``"italic"``"iteration-ccw"``"iteration-cw"``"japanese-yen"``"joystick"``"kanban"``"kayak"``"key-round"``"key-square"``"key"``"keyboard-music"``"keyboard-off"``"keyboard"``"lamp-ceiling"``"lamp-desk"``"lamp-floor"``"lamp-wall-down"``"lamp-wall-up"``"lamp"``"land-plot"``"landmark"``"languages"``"laptop-minimal-check"``"laptop-minimal"``"laptop-2"``"laptop"``"lasso-select"``"lasso"``"laugh"``"layers-2"``"layers-plus"``"layers"``"layers-3"``"layout-dashboard"``"layout-grid"``"layout-list"``"layout-panel-left"``"layout-panel-top"``"layout-template"``"leaf"``"leafy-green"``"lectern"``"library-big"``"library"``"life-buoy"``"ligature"``"lightbulb-off"``"lightbulb"``"line-squiggle"``"link-2-off"``"link-2"``"linkedin"``"list-check"``"list-checks"``"list-chevrons-down-up"``"list-chevrons-up-down"``"list-collapse"``"list-end"``"list-filter-plus"``"list-filter"``"list-indent-decrease"``"outdent"``"indent-decrease"``"list-indent-increase"``"indent"``"indent-increase"``"list-minus"``"list-music"``"list-ordered"``"list-plus"``"list-restart"``"list-start"``"list-todo"``"list-tree"``"list-video"``"list-x"``"loader-circle"``"loader-2"``"loader-pinwheel"``"loader"``"locate-fixed"``"locate-off"``"locate"``"lock-keyhole-open"``"unlock-keyhole"``"lock-keyhole"``"lock-open"``"unlock"``"lock"``"log-in"``"log-out"``"logs"``"lollipop"``"luggage"``"magnet"``"mail-check"``"mail-minus"``"mail-open"``"mail-plus"``"mail-question-mark"``"mail-question"``"mail-search"``"mail-warning"``"mail-x"``"mail"``"mailbox"``"mails"``"map-minus"``"map-pin-check-inside"``"map-pin-check"``"map-pin-house"``"map-pin-minus-inside"``"map-pin-minus"``"map-pin-off"``"map-pin-pen"``"location-edit"``"map-pin-plus-inside"``"map-pin-plus"``"map-pin-x-inside"``"map-pin-x"``"map-pin"``"map-pinned"``"map-plus"``"mars-stroke"``"mars"``"martini"``"maximize-2"``"maximize"``"medal"``"megaphone-off"``"megaphone"``"meh"``"memory-stick"``"merge"``"message-circle-code"``"message-circle-dashed"``"message-circle-heart"``"message-circle-more"``"message-circle-off"``"message-circle-plus"``"message-circle-question-mark"``"message-circle-question"``"message-circle-reply"``"message-circle-warning"``"message-circle-x"``"message-circle"``"message-square-code"``"message-square-dashed"``"message-square-diff"``"message-square-dot"``"message-square-heart"``"message-square-lock"``"message-square-more"``"message-square-off"``"message-square-plus"``"message-square-quote"``"message-square-reply"``"message-square-share"``"message-square-text"``"message-square-warning"``"message-square-x"``"message-square"``"messages-square"``"mic-off"``"mic-vocal"``"mic-2"``"mic"``"microchip"``"microscope"``"microwave"``"milestone"``"milk-off"``"milk"``"minimize-2"``"minimize"``"minus"``"monitor-check"``"monitor-cloud"``"monitor-cog"``"monitor-dot"``"monitor-down"``"monitor-off"``"monitor-pause"``"monitor-play"``"monitor-smartphone"``"monitor-speaker"``"monitor-stop"``"monitor-up"``"monitor-x"``"monitor"``"moon-star"``"moon"``"motorbike"``"mountain-snow"``"mountain"``"mouse-off"``"mouse-pointer-2-off"``"mouse-pointer-2"``"mouse-pointer-ban"``"mouse-pointer-click"``"mouse-pointer"``"mouse"``"move-3d"``"move-3-d"``"move-diagonal-2"``"move-diagonal"``"move-down-left"``"move-down-right"``"move-down"``"move-horizontal"``"move-left"``"move-right"``"move-up-left"``"move-up-right"``"move-up"``"move-vertical"``"move"``"music-2"``"music-3"``"music-4"``"music"``"navigation-2-off"``"navigation-2"``"navigation-off"``"navigation"``"network"``"newspaper"``"nfc"``"non-binary"``"notebook-pen"``"notebook-tabs"``"notebook-text"``"notebook"``"notepad-text-dashed"``"notepad-text"``"nut-off"``"nut"``"octagon-alert"``"alert-octagon"``"octagon-minus"``"octagon-pause"``"pause-octagon"``"octagon-x"``"x-octagon"``"octagon"``"omega"``"orbit"``"origami"``"package-2"``"package-check"``"package-minus"``"package-open"``"package-plus"``"package-search"``"package-x"``"package"``"paint-bucket"``"paint-roller"``"paintbrush-vertical"``"paintbrush-2"``"paintbrush"``"palette"``"panda"``"panel-bottom-close"``"panel-bottom-dashed"``"panel-bottom-inactive"``"panel-bottom-open"``"panel-bottom"``"panel-left-close"``"sidebar-close"``"panel-left-dashed"``"panel-left-inactive"``"panel-left-open"``"sidebar-open"``"panel-left-right-dashed"``"panel-left"``"sidebar"``"panel-right-close"``"panel-right-dashed"``"panel-right-inactive"``"panel-right-open"``"panel-right"``"panel-top-bottom-dashed"``"panel-top-close"``"panel-top-dashed"``"panel-top-inactive"``"panel-top-open"``"panel-top"``"panels-left-bottom"``"panels-right-bottom"``"panels-top-left"``"layout"``"paperclip"``"parentheses"``"parking-meter"``"party-popper"``"pause"``"paw-print"``"pc-case"``"pen-line"``"edit-3"``"pen-off"``"pen-tool"``"pen"``"edit-2"``"pencil-line"``"pencil-off"``"pencil-ruler"``"pencil"``"pentagon"``"percent"``"person-standing"``"philippine-peso"``"phone-call"``"phone-forwarded"``"phone-incoming"``"phone-missed"``"phone-off"``"phone-outgoing"``"phone"``"pi"``"piano"``"pickaxe"``"picture-in-picture-2"``"picture-in-picture"``"piggy-bank"``"pilcrow-left"``"pilcrow-right"``"pilcrow"``"pill-bottle"``"pin-off"``"pin"``"pipette"``"pizza"``"plane-landing"``"plane-takeoff"``"plane"``"play"``"plug-2"``"plug-zap"``"plug-zap-2"``"plug"``"plus"``"pocket-knife"``"pocket"``"podcast"``"pointer-off"``"pointer"``"popcorn"``"popsicle"``"pound-sterling"``"power-off"``"power"``"presentation"``"printer-check"``"printer"``"projector"``"proportions"``"puzzle"``"pyramid"``"qr-code"``"quote"``"rabbit"``"radar"``"radiation"``"radical"``"radio-receiver"``"radio-tower"``"radio"``"radius"``"rail-symbol"``"rainbow"``"rat"``"receipt-cent"``"receipt-euro"``"receipt-indian-rupee"``"receipt-japanese-yen"``"receipt-pound-sterling"``"receipt-russian-ruble"``"receipt-swiss-franc"``"receipt-text"``"receipt-turkish-lira"``"receipt"``"rectangle-circle"``"rectangle-ellipsis"``"form-input"``"rectangle-goggles"``"rectangle-horizontal"``"rectangle-vertical"``"recycle"``"redo-2"``"redo-dot"``"redo"``"refresh-ccw-dot"``"refresh-ccw"``"refresh-cw-off"``"refresh-cw"``"refrigerator"``"regex"``"remove-formatting"``"repeat-1"``"repeat-2"``"replace-all"``"replace"``"reply-all"``"reply"``"rewind"``"ribbon"``"rocket"``"rocking-chair"``"roller-coaster"``"rose"``"rotate-3d"``"rotate-3-d"``"rotate-ccw-key"``"rotate-ccw-square"``"rotate-ccw"``"rotate-cw-square"``"rotate-cw"``"route-off"``"route"``"router"``"rows-2"``"rows-3"``"panels-top-bottom"``"rows-4"``"rss"``"ruler-dimension-line"``"ruler"``"russian-ruble"``"sailboat"``"salad"``"sandwich"``"satellite-dish"``"satellite"``"saudi-riyal"``"save-all"``"save-off"``"save"``"scale-3d"``"scale-3-d"``"scaling"``"scan-barcode"``"scan-eye"``"scan-face"``"scan-heart"``"scan-line"``"scan-qr-code"``"scan-search"``"scan-text"``"scan"``"school"``"scissors-line-dashed"``"scissors"``"scooter"``"screen-share-off"``"screen-share"``"scroll-text"``"search-alert"``"search-check"``"search-code"``"search-slash"``"search-x"``"send-horizontal"``"send-horizonal"``"send-to-back"``"send"``"separator-horizontal"``"separator-vertical"``"server-cog"``"server-crash"``"server-off"``"server"``"settings-2"``"settings"``"shapes"``"share-2"``"share"``"sheet"``"shell"``"shield-alert"``"shield-ban"``"shield-check"``"shield-ellipsis"``"shield-half"``"shield-minus"``"shield-off"``"shield-plus"``"shield-question-mark"``"shield-question"``"shield-user"``"shield-x"``"shield-close"``"shield"``"ship-wheel"``"ship"``"shirt"``"shopping-bag"``"shopping-basket"``"shopping-cart"``"shovel"``"shower-head"``"shredder"``"shrimp"``"shrink"``"shrub"``"shuffle"``"sigma"``"signal-high"``"signal-low"``"signal-medium"``"signal-zero"``"signal"``"signature"``"signpost-big"``"signpost"``"siren"``"skip-back"``"skip-forward"``"skull"``"slack"``"slash"``"slice"``"sliders-horizontal"``"sliders-vertical"``"sliders"``"smartphone-charging"``"smartphone-nfc"``"smartphone"``"smile-plus"``"smile"``"snail"``"snowflake"``"soap-dispenser-droplet"``"sofa"``"solar-panel"``"soup"``"spade"``"sparkle"``"sparkles"``"stars"``"speaker"``"speech"``"spell-check-2"``"spell-check"``"spline-pointer"``"spline"``"split"``"spool"``"spotlight"``"spray-can"``"sprout"``"square-activity"``"activity-square"``"square-arrow-down-left"``"arrow-down-left-square"``"square-arrow-down-right"``"arrow-down-right-square"``"square-arrow-down"``"arrow-down-square"``"square-arrow-left"``"arrow-left-square"``"square-arrow-out-down-left"``"arrow-down-left-from-square"``"square-arrow-out-down-right"``"arrow-down-right-from-square"``"square-arrow-out-up-left"``"arrow-up-left-from-square"``"square-arrow-out-up-right"``"arrow-up-right-from-square"``"square-arrow-right"``"arrow-right-square"``"square-arrow-up-left"``"arrow-up-left-square"``"square-arrow-up-right"``"arrow-up-right-square"``"square-arrow-up"``"arrow-up-square"``"square-asterisk"``"asterisk-square"``"square-bottom-dashed-scissors"``"scissors-square-dashed-bottom"``"square-chart-gantt"``"gantt-chart-square"``"square-gantt-chart"``"square-check-big"``"check-square"``"square-check"``"check-square-2"``"square-chevron-down"``"chevron-down-square"``"square-chevron-left"``"chevron-left-square"``"square-chevron-right"``"chevron-right-square"``"square-chevron-up"``"chevron-up-square"``"square-code"``"code-square"``"square-dashed-bottom-code"``"square-dashed-bottom"``"square-dashed-kanban"``"kanban-square-dashed"``"square-dashed-mouse-pointer"``"mouse-pointer-square-dashed"``"square-dashed-top-solid"``"square-dashed"``"box-select"``"square-divide"``"divide-square"``"square-dot"``"dot-square"``"square-equal"``"equal-square"``"square-function"``"function-square"``"square-kanban"``"kanban-square"``"square-library"``"library-square"``"square-m"``"m-square"``"square-menu"``"menu-square"``"square-minus"``"minus-square"``"square-mouse-pointer"``"inspect"``"square-parking-off"``"parking-square-off"``"square-parking"``"parking-square"``"square-pause"``"square-pen"``"pen-box"``"edit"``"pen-square"``"square-percent"``"percent-square"``"square-pi"``"pi-square"``"square-pilcrow"``"pilcrow-square"``"square-play"``"play-square"``"square-plus"``"plus-square"``"square-power"``"power-square"``"square-radical"``"square-round-corner"``"square-scissors"``"scissors-square"``"square-sigma"``"sigma-square"``"square-slash"``"slash-square"``"square-split-horizontal"``"split-square-horizontal"``"square-split-vertical"``"split-square-vertical"``"square-square"``"square-stack"``"square-star"``"square-stop"``"square-terminal"``"terminal-square"``"square-user-round"``"user-square-2"``"square-user"``"user-square"``"square-x"``"x-square"``"squares-exclude"``"squares-intersect"``"squares-subtract"``"squares-unite"``"squircle-dashed"``"squircle"``"squirrel"``"stamp"``"star-half"``"star-off"``"star"``"step-back"``"step-forward"``"stethoscope"``"sticker"``"sticky-note"``"stone"``"store"``"stretch-horizontal"``"stretch-vertical"``"strikethrough"``"subscript"``"sun-dim"``"sun-medium"``"sun-moon"``"sun-snow"``"sun"``"sunrise"``"sunset"``"superscript"``"swatch-book"``"swiss-franc"``"switch-camera"``"sword"``"swords"``"syringe"``"table-2"``"table-cells-merge"``"table-cells-split"``"table-columns-split"``"table-of-contents"``"table-properties"``"table-rows-split"``"tablet-smartphone"``"tablet"``"tablets"``"tag"``"tags"``"tally-1"``"tally-2"``"tally-3"``"tally-4"``"tally-5"``"tangent"``"telescope"``"tent-tree"``"tent"``"terminal"``"test-tube-diagonal"``"test-tube-2"``"test-tube"``"test-tubes"``"text-align-center"``"align-center"``"text-align-end"``"align-right"``"text-align-justify"``"align-justify"``"text-align-start"``"align-left"``"text-cursor-input"``"text-cursor"``"text-initial"``"letter-text"``"text-quote"``"text-search"``"text-select"``"text-selection"``"text-wrap"``"wrap-text"``"theater"``"thermometer-snowflake"``"thermometer-sun"``"thermometer"``"thumbs-down"``"thumbs-up"``"ticket-check"``"ticket-minus"``"ticket-percent"``"ticket-plus"``"ticket-slash"``"ticket-x"``"ticket"``"tickets-plane"``"tickets"``"timer-off"``"timer-reset"``"timer"``"toggle-left"``"toggle-right"``"toilet"``"tool-case"``"toolbox"``"tornado"``"torus"``"touchpad-off"``"touchpad"``"tower-control"``"toy-brick"``"tractor"``"traffic-cone"``"train-front-tunnel"``"train-front"``"train-track"``"tram-front"``"train"``"transgender"``"trash-2"``"trash"``"tree-deciduous"``"tree-palm"``"palmtree"``"tree-pine"``"trees"``"trello"``"trending-down"``"trending-up-down"``"trending-up"``"triangle-alert"``"alert-triangle"``"triangle-dashed"``"triangle-right"``"trophy"``"truck-electric"``"truck"``"turkish-lira"``"turntable"``"turtle"``"tv-minimal-play"``"tv-minimal"``"tv-2"``"tv"``"twitch"``"twitter"``"type-outline"``"umbrella-off"``"umbrella"``"undo-2"``"undo-dot"``"undo"``"unfold-horizontal"``"unfold-vertical"``"ungroup"``"university"``"school-2"``"unlink-2"``"unlink"``"unplug"``"upload"``"usb"``"user-check"``"user-cog"``"user-lock"``"user-minus"``"user-pen"``"user-plus"``"user-round-check"``"user-check-2"``"user-round-cog"``"user-cog-2"``"user-round-minus"``"user-minus-2"``"user-round-pen"``"user-round-plus"``"user-plus-2"``"user-round-search"``"user-round-x"``"user-x-2"``"user-round"``"user-2"``"user-search"``"user-star"``"user-x"``"user"``"users-round"``"users-2"``"users"``"utensils-crossed"``"fork-knife-crossed"``"utensils"``"fork-knife"``"utility-pole"``"van"``"variable"``"vault"``"vector-square"``"vegan"``"venetian-mask"``"venus-and-mars"``"venus"``"vibrate-off"``"vibrate"``"video-off"``"videotape"``"voicemail"``"volleyball"``"volume-1"``"volume-2"``"volume-off"``"volume-x"``"volume"``"vote"``"wallet-cards"``"wallet-minimal"``"wallet-2"``"wallet"``"wallpaper"``"wand-sparkles"``"wand-2"``"wand"``"warehouse"``"washing-machine"``"watch"``"waves-arrow-down"``"waves-arrow-up"``"waves-ladder"``"waves"``"waypoints"``"webcam"``"webhook-off"``"webhook"``"weight-tilde"``"weight"``"wheat-off"``"wheat"``"whole-word"``"wifi-cog"``"wifi-high"``"wifi-low"``"wifi-off"``"wifi-pen"``"wifi-sync"``"wifi-zero"``"wifi"``"wind-arrow-down"``"wind"``"wine-off"``"wine"``"workflow"``"worm"``"wrench"``"youtube"``"zap-off"``"zap"``"zoom-in"``"zoom-out"` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L18) |
| `onChange` | `((iconName: IconName) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L20) |
| `views` | `IconPickerStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L22) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L24) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L26) |
| `variant` | `Variant` `"outline"``"default"``"filled"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L28) |
| `error` | `boolean` | `false` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L30) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L32) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L34) |
| `showSearch` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L36) |
| `isOpen` | `boolean` | `—` | Controls whether the component is open.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L38) |
| `onOpen` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L40) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L42) |
| `closeOnSelect` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/IconPicker/IconPicker/IconPicker.props.ts#L44) |

Common inherited styling props (7)

**IconPicker inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Table

@app-studio/components

# Table

Renders a tabular display for presenting structured data with customizable styles.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table.tsx)

## Import

```ts
import { Table } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Table } from '@app-studio/components';

export const CaptionDemo = () => {
  const cols = [
    { title: 'Invoice', field: 'invoice' },
    { title: 'Payment Status', field: 'paymentStatus' },
    { title: 'Total Amount', field: 'totalAmount' },
    { title: 'Payment Method', field: 'paymentMethod' },
  ];
  const invoices = [
    {
      invoice: 'INV001',
      paymentStatus: 'Paid',
      totalAmount: '$250.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV002',
      paymentStatus: 'Pending',
      totalAmount: '$150.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV003',
      paymentStatus: 'Unpaid',
      totalAmount: '$350.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV004',
      paymentStatus: 'Paid',
      totalAmount: '$450.00',
      paymentMethod: 'Credit Card',
    },
    {
      invoice: 'INV005',
      paymentStatus: 'Paid',
      totalAmount: '$550.00',
      paymentMethod: 'PayPal',
    },
    {
      invoice: 'INV006',
      paymentStatus: 'Pending',
      totalAmount: '$200.00',
      paymentMethod: 'Bank Transfer',
    },
    {
      invoice: 'INV007',
      paymentStatus: 'Unpaid',
      totalAmount: '$300.00',
      paymentMethod: 'Credit Card',
    },
  ];
  return (
    <Table.Template
      caption="A list of your recent invoices."
      columns={cols}
      data={invoices}
    />
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Table**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `Head` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L15) |
| `Body` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L16) |
| `Row` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L17) |
| `Cell` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L18) |
| `Footer` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L19) |
| `Caption` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L20) |
| `TableContainer` | `React.FC<any>` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L21) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L22) |
| `views` | `TableViewStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L23) |
| `onClick` | `((event: React.MouseEvent<HTMLElement>) => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L25) |

### Table.Cell

**Table.Cell**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isFirstColumn` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.view.tsx#L70) |

### Table.Template

**Table.Template**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` Required | `any[]` | `—` | Data to render.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L5) |
| `columns` Required | `Column[]` | `—` | Column definitions used to render the data.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L6) |
| `footer` | `FooterCell[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L7) |
| `caption` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L8) |
| `views` | `TableViewStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Table/Table/Table.props.ts#L9) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Title

@app-studio/components

# Title

Displays customizable titles with highlighting, responsive sizing, animation effects, and multi-line support.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title.tsx)

## Import

```ts
import { Title } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Title } from '@app-studio/components';

/**
 * Default Title examples showing different sizes
 */
export const DefaultTitle = () => {
  return (
    <Vertical gap={32}>
      <Title size="xs">Extra Small Title (xs)</Title>
      <Title size="sm">Small Title (sm)</Title>
      <Title size="md">Medium Title (md)</Title>
      <Title size="lg">Large Title (lg)</Title>
      <Title size="xl">Extra Large Title</Title>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Title**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` `1``2``3``4``5``6` | `1` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L6) |
| `centered` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L8) |
| `_isInView` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L10) |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L16) |
| `highlightText` | `string \| string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L20) |
| `alternateHighlightText` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L26) |
| `highlightAnimate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L28) |
| `highlightTypewriter` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L30) |
| `highlightTypewriterDuration` | `number` | `3000` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L32) |
| `highlightSlide` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L34) |
| `highlightSlideDuration` | `number` | `500` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L36) |
| `highlightSlideStagger` | `number` | `50` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L38) |
| `highlightSlideSequential` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L40) |
| `highlightStyle` | `HighlightStyle` `"background"``"outline"``"default"``"solid"``"underline"``"gradient"``"glow"` | `'solid'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L42) |
| `highlightColor` | `string` | `'theme-primary'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L44) |
| `highlightSecondaryColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L46) |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L48) |
| `animationLoop` | `number \| "infinite"` | `1` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L50) |
| `highlightAnimationLoop` | `number \| "infinite"` | `1` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L52) |
| `size` | `TitleSize` `"sm"``"md"``"lg"``"xs"``"xl"` | `'lg'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L54) |
| `responsive` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L56) |
| `views` | `TitleStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L58) |
| `alternateAnimation` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L60) |
| `alternateDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Title/Title/Title.props.ts#L62) |

Common inherited styling props (7)

**Title inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Tooltip

@app-studio/components

# Tooltip

A tooltip component for displaying contextual information on hover or focus, with customizable positioning, styling, and behavior.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip.tsx)

## Import

```ts
import { Tooltip } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Tooltip } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const DefaultTooltip = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>
        <Tooltip content="This is a tooltip">
          <Button>Hover Me</Button>
        </Tooltip>
        Default Tooltip
      </Text>
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Tooltip**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L13) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L15) |
| `position` | `Position` `"bottom"``"left"``"right"``"top"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L17) |
| `align` | `Alignment` `"start"``"center"``"end"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L19) |
| `size` | `Size` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L21) |
| `variant` | `Variant` `"light"``"dark"``"default"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L23) |
| `openDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L25) |
| `closeDelay` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L27) |
| `showArrow` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L29) |
| `defaultOpen` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L30) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L32) |
| `views` | `TooltipStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L34) |

### Tooltip.Trigger

**Tooltip.Trigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L41) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L43) |
| `asChild` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L47) |

### Tooltip.Content

**Tooltip.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L54) |
| `views` | `{ container?: ViewProps; arrow?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Tooltip/Tooltip/Tooltip.props.ts#L56) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Alert

@app-studio/components

# Alert

Displays important messages to users with various styles and states.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert.tsx)

## Import

```ts
import { Alert } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Alert } from '@app-studio/components';

export const DefaultDemo = () => {
  return (
    <Alert
      title="Heads up!"
      description="You can add components to your app using the cli."
    />
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Alert**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L7) |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L9) |
| `description` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Secondary text describing the control or its current state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L11) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L13) |
| `variant` | `Variant` `"default"``"error"``"info"``"success"``"warning"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L15) |
| `severity` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L17) |
| `status` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L19) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L21) |
| `views` | `AlertStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Alert/Alert/Alert.props.tsx#L23) |

Common inherited styling props (7)

**Alert inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/CookieConsent

@app-studio/components

# CookieConsent

Displays a customizable banner to manage user consent for cookies, enhancing user experience.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent.tsx)

## Import

```ts
import { CookieConsent } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Button } from '@app-studio/components';
import { Text, View } from 'app-studio';
import { CookieConsent } from '@app-studio/components';

/**
 * Default CookieConsent example
 */
export const DefaultCookieConsent = () => {
  // State to control visibility for demo purposes
  const [showConsent, setShowConsent] = React.useState(false);

  // Reset cookie consent to show the banner
  const handleShowConsent = () => {
    // Clear localStorage to simulate a new visit (web only).
    if (typeof localStorage !== 'undefined') {
      localStorage.removeItem('app-studio-cookie-consent');
      localStorage.removeItem('app-studio-cookie-consent-expires');
    }
    setShowConsent(true);
  };

  return (
    <View width="100%" maxWidth={600}>
      <Text marginBottom={16}>
        Cliquez sur le bouton ci-dessous pour afficher la bannière de
        consentement des cookies
      </Text>

      <Button onClick={handleShowConsent}>
        Afficher le consentement des cookies
      </Button>

      {showConsent && (
        <CookieConsent
          onAccept={() => setShowConsent(false)}
          onCustomize={() => alert('Préférences de personnalisation cliquées')}
        />
      )}
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**CookieConsent**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L10) |
| `description` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Secondary text describing the control or its current state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L12) |
| `acceptButtonText` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L14) |
| `customizeButtonText` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L16) |
| `position` | `CookieConsentPosition` `"bottom"``"top"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L18) |
| `variant` | `CookieConsentVariant` `"default"``"info"``"primary"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L20) |
| `onAccept` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L22) |
| `onCustomize` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L24) |
| `views` | `CookieConsentStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L26) |
| `showCustomizeButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L28) |
| `cookieExpiration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/CookieConsent/CookieConsent/CookieConsent.props.ts#L30) |

Common inherited styling props (7)

**CookieConsent inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Loader

@app-studio/components

# Loader

A loading indicator component with multiple types, sizes, speeds, and text positioning options.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader.tsx)

## Import

```ts
import { Loader } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Loader } from '@app-studio/components';

export const DefaultLoader = () => <Loader />;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Loader**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L7) |
| `loaderColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L9) |
| `type` | `LoaderType` `"default"``"dotted"``"quarter"` | `'default'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L11) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L13) |
| `textPosition` | `TextPosition` `"bottom"``"left"``"right"``"top"` | `'right'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L15) |
| `size` | `number \| Size` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L17) |
| `speed` | `Speed` `"slow"``"fast"``"normal"` | `'normal'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Loader/Loader/Loader.props.ts#L19) |

Common inherited styling props (7)

**Loader inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Message

@app-studio/components

# Message

Display application messages with showMessage and a mounted MessageLayout. MessageView supplies the presentation props below.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.view.tsx)

## Import

```ts
import { MessageLayout, showMessage } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { MessageLayout, showMessage } from '@app-studio/components';
import { Button } from '@app-studio/components';

export function MessageExample() {
  return (
    <>
      <Button
        onClick={() =>
          showMessage(
            'success',
            'Changes saved',
            'Your local example is ready.',
            { isClosable: true }
          )
        }
      >
        Show message
      </Button>
      <MessageLayout />
    </>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**MessageView**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `subtitle` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L23) |
| `variant` Required | `"error" \| "info" \| "success" \| "warning"` `"error"``"info"``"success"``"warning"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L24) |
| `show` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L25) |
| `hide` Required | `() => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L26) |
| `title` Required | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L27) |
| `theme` | `ThemesType` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L28) |
| `isClosable` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L14) |
| `views` | `MessageViewStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L15) |
| `action` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L17) |
| `actionText` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L18) |
| `showIcon` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L19) |
| `timeout` | `number` | `3000` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L20) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ProgressBar

@app-studio/components

# ProgressBar

A progress bar component for displaying progress or completion status with customizable colors, shapes (linear or circular), and styling.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar.tsx)

## Import

```ts
import { ProgressBar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { ProgressBar } from '@app-studio/components';

export const DefaultDemo = () => <ProgressBar value={50} />;
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ProgressBar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shape` | `"circle" \| "linear"` `"circle"``"linear"` | `'linear'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L16) |
| `value` | `number` | `0` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L18) |
| `max` | `number` | `100` | Maximum allowed value.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L20) |
| `color` | `string` | `'theme-primary'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L22) |
| `backgroundColor` | `string` | `'color-gray-200'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `transparent` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L24) |
| `height` | `string \| number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L26) |
| `size` | `number` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L28) |
| `radius` | `string \| number` | `4` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L30) |
| `strokeWidth` | `number` | `10` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<length-percentage> \| <number>` **Initial value**: `1px` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :-----: \| :-: \| \| **1** \| **1.5** \| **4** \| **≤15** \| No \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L32) |
| `showLabel` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L34) |
| `labelColor` | `string` | `'color-black-primary'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L36) |
| `animated` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L38) |
| `animationDuration` | `string` | `'0.5s'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `[ auto \| <time [0s,∞]> ]#` **Initial value**: `0s` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L40) |
| `views` | `ProgressBarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ProgressBar/ProgressBar/ProgressBar.props.ts#L42) |

Common inherited styling props (7)

**ProgressBar inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/StatusIndicator

@app-studio/components

# StatusIndicator

A status indicator component for displaying status states with labels and customizable styling.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/StatusIndicator/StatusIndicator.tsx)

## Import

```ts
import { StatusIndicator } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { StatusIndicator } from '@app-studio/components';

export const DefaultDemo = () => (
  <StatusIndicator label="Active" status="success" />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**StatusIndicator**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/StatusIndicator/StatusIndicator/StatusIndicator.props.ts#L5) |
| `status` | `Status` `"default"``"error"``"info"``"success"``"warning"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/StatusIndicator/StatusIndicator/StatusIndicator.props.ts#L7) |
| `views` | `StatusIndicatorStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/StatusIndicator/StatusIndicator/StatusIndicator.props.ts#L9) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/StatusIndicator/StatusIndicator/StatusIndicator.props.ts#L11) |

Common inherited styling props (7)

**StatusIndicator inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Toast

@app-studio/components

# Toast

Displays temporary, dismissible messages to inform users about actions, status, or events.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast.tsx)

## Import

```ts
import { Toast } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Toast } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Horizontal } from 'app-studio';

export function ToastExample() {
  return (
    <>
      <Horizontal gap={12} flexWrap="wrap">
        <Button
          onClick={() =>
            Toast.success('Project saved', 'Your changes are ready.')
          }
        >
          Show success
        </Button>
        <Button
          variant="outline"
          onClick={() => Toast.error('Try again', 'This is an example error.')}
        >
          Show error
        </Button>
        <Button variant="ghost" onClick={() => Toast.removeAll()}>
          Dismiss all
        </Button>
      </Horizontal>
      <Toast.Container />
    </>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Toast**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L13) |
| `variant` Required | `"error" \| "info" \| "success" \| "warning"` `"error"``"info"``"success"``"warning"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L15) |
| `title` Required | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L17) |
| `description` | `string` | `—` | Secondary text describing the control or its current state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L19) |
| `onClose` Required | `() => void` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L21) |
| `isClosable` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L23) |
| `action` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L25) |
| `actionText` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L27) |
| `showIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L29) |
| `theme` | `ThemesType` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L31) |
| `views` | `ToastStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L33) |
| `duration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L35) |
| `render` | `((props: { id: string; onClose: () => void; }) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L37) |
| `icon` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L44) |
| `isVisible` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L46) |

Common inherited styling props (7)

**Toast inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

### Toast.Container

**Toast.Container**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `position` | `ToastPosition` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L51) |
| `gap` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L53) |
| `limit` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L55) |
| `containerStyle` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").CSSProperties` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Toast/Toast/Toast.props.ts#L56) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ChatInput

@app-studio/components

# Chat

A chat composer with file attachments, prompt examples, `@` mentions, suggestions, audio recording and agent controls.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput.tsx)

## Import

```ts
import { ChatInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { ChatInput } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function ChatExample() {
  const [message, setMessage] = useState('');
  return (
    <Vertical gap={16} width="100%">
      <ChatInput
        placeholder="Write a local message…"
        onSubmit={(value) => setMessage(value)}
      />
      <Text role="status">
        {message ? `Submitted: ${message}` : 'Messages stay in this example.'}
      </Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ChatInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `getPendingFiles` | `(() => File[])` | `—` | Get the pending files[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L66) |
| `clearPendingFiles` | `(() => void)` | `—` | Clear the pending files[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L71) |
| `onSubmit` | `((message: string, options?: { model_name?: string; enable_thinking?: boolean; }) => void)` | `—` | Callback function when the form is submitted[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L75) |
| `placeholder` | `string` | `'Type your message… use @ to mention'` | Placeholder text for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L83) |
| `loading` | `boolean` | `false` | Whether the input is in a loading state[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L88) |
| `disabled` | `boolean` | `false` | Whether the input is disabled[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L93) |
| `isDisabled` | `boolean` | `—` | Whether the input is disabled (camelCase alias for `disabled`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L98) |
| `lines` | `number` | `—` | Visible row count for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L103) |
| `rightElement` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Optional right-side affordance rendered inside the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L108) |
| `onKeyDown` | `((e: React.KeyboardEvent) => void)` | `—` | Optional key handler for the editable area[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L113) |
| `error` | `any` | `—` | Error state or value used by form wrappers[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L118) |
| `isAgentRunning` | `boolean` | `false` | Whether an agent is currently running[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L123) |
| `isWorkerRunning` | `boolean` | `—` | Whether an agent is currently running (alias for `isAgentRunning`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L128) |
| `onStopAgent` | `(() => void)` | `—` | Callback function to stop the agent[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L133) |
| `onStopWorker` | `(() => void)` | `—` | Callback function to stop the worker (alias for `onStopAgent`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L138) |
| `autoFocus` | `boolean` | `true` | Whether to auto focus the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L143) |
| `value` | `string` | `—` | Controlled value for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L148) |
| `onChange` | `((value: string) => void)` | `—` | Callback function when the input value changes[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L153) |
| `name` | `string` | `—` | Form field name for the value. Applied to the hidden mirror `<textarea>`, so the message is submitted with a surrounding native `<form>` and is addressable via `[name="…"]`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L159) |
| `hiddenInput` | `boolean` | `true` | Whether to render the hidden `<textarea>` that mirrors the editable area's text (default `true`). It makes `element.value` work for generic tooling; set to `false` only if the extra node is a problem.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L165) |
| `onFileBrowse` | `(() => void)` | `—` | Callback function when the file browser is opened[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L170) |
| `sandboxId` | `string` | `—` | ID of the sandbox[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L175) |
| `onUploadProgress` | `((progress: number) => void)` | `—` | Callback when file upload progress changes[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L180) |
| `onUploadSuccess` | `((data: any) => void)` | `—` | Callback when file upload succeeds[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L185) |
| `onUploadError` | `((error: any) => void)` | `—` | Callback when file upload fails[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L190) |
| `onFileUpload` | `((file: File) => void)` | `—` | Function to execute file upload. Parent should provide this. Should return an object with a loading property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L196) |
| `hideAttachments` | `boolean` | `false` | Whether to hide the attachment button[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L201) |
| `enableAudioRecording` | `boolean` | `false` | Enable audio recording button[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L206) |
| `onAudioRecordingStart` | `(() => void)` | `—` | Callback when audio recording starts[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L211) |
| `onAudioRecordingStop` | `((audio: Blob) => void)` | `—` | Callback when audio recording stops[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L216) |
| `title` | `string` | `—` | Title for the chat input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L221) |
| `showGuideTip` | `boolean` | `—` | Whether to show the guide tip[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L226) |
| `guideVideoUrl` | `string` | `—` | URL for the guide video[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L231) |
| `onGuideClose` | `(() => void)` | `—` | Callback function when the guide tip is closed[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L236) |
| `promptExamples` | `PromptExample[]` | `[]` | List of prompt examples[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L241) |
| `suggestions` | `Suggestion[]` | `[]` | List of suggestions for auto-completion[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L246) |
| `onPromptExampleSelect` | `((example: PromptExample) => void)` | `—` | Callback function when a prompt example is selected[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L251) |
| `mentionData` | `{ id: string; name: string; avatar?: string; description?: string; }[]` | `[]` | Data for mention auto-completion[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L256) |
| `mentionTrigger` | `string` | `'@'` | Trigger character for mentions (default: '@')[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L266) |
| `onMentionSelect` | `((mention: { id: string; name: string; avatar?: string; description?: string; }) => void)` | `—` | Callback function when a mention is selected[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L271) |
| `errorMessage` | `string` | `—` | Error message to display at the bottom[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L281) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L286) |
| `shape` | `Shape` `"square"``"rounded"``"default"` | `'rounded'` | Shape of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L291) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Variant of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L296) |
| `views` | `ChatInputStyles` | `{}` | Style customization[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L301) |

Common inherited styling props (7)

**ChatInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ChatWidget

@app-studio/components

# ChatWidget

---

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget.tsx)

## Import

```ts
import { ChatWidget } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { View, Button, Text, Vertical } from 'app-studio';
import { ChatWidgetWidget } from '@app-studio/components';

export function WidgetDemo() {
  const [showWidget, setShowWidget] = useState(true);

  return (
    <View
      height="400px"
      position="relative"
      border="1px dashed #ccc"
      borderRadius="12px"
      padding="24px"
    >
      <Vertical gap={16}>
        <Text fontSize="18px" fontWeight="bold">
          Interactive Widget Demo
        </Text>
        <Text color="color-gray-600">
          The widget is fixed to the bottom-right of this container (visually
          simulating a page). Click the floating action button to open the chat.
        </Text>
        <Text color="color-gray-600">
          Try the &quot;Plus&quot; icon in the chat input to enter &quot;Context
          Selection Mode&quot; and pick elements on this page.
        </Text>

        <Button onClick={() => setShowWidget(!showWidget)} width="fit-content">
          {showWidget ? 'Hide Widget' : 'Show Widget'}
        </Button>

        {/* Dummy elements to pick */}
        <View display="flex" gap="16px" flexWrap="wrap" marginTop="24px">
          <View
            padding="16px"
            backgroundColor="color-blue-100"
            borderRadius="8px"
            id="box-1"
          >
            Pick me (Box 1)
          </View>
          <View
            padding="16px"
            backgroundColor="color-green-100"
            borderRadius="8px"
            id="box-2"
          >
            Pick me (Box 2)
          </View>
          <View
            padding="16px"
            backgroundColor="color-purple-100"
            borderRadius="8px"
            id="text-element"
          >
            <Text>Text Element</Text>
          </View>
        </View>
      </Vertical>

      {/* Render widget inside this relative container for demo purposes (usually it's fixed to body) */}
      {showWidget && (
        <View
          position="absolute"
          bottom={0}
          right={0}
          width="100%"
          height="100%"
          pointerEvents="none"
        >
          <View pointerEvents="auto">
            <ChatWidgetWidget
              bubbleSize="md"
              initialMessages={[
                {
                  id: 'welcome',
                  role: 'assistant',
                  content:
                    'Hi! Click the + button to select an element from the page.',
                  timestamp: new Date(),
                },
                {
                  id: 'system-msg',
                  role: 'assistant',
                  messageType: 'system',
                  content: 'System: Context selection mode enabled',
                  timestamp: new Date(),
                },
                {
                  id: 'reasoning-demo',
                  role: 'assistant',
                  content: 'I can also show my thinking process!',
                  reasoning:
                    'The user might want to know about internal logic. I should demonstrate the reasoning block.',
                  timestamp: new Date(),
                },
                {
                  id: 'tool-call',
                  role: 'assistant',
                  messageType: 'tool',
                  content: 'Called function: getElementById("box-1")',
                  timestamp: new Date(),
                },
              ]}
            />
          </View>
        </View>
      )}
    </View>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ChatWidget**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `messages` | `Message[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L11) |
| `inputValue` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L13) |
| `onInputChange` | `((value: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L15) |
| `onSubmit` | `((message: string) => void)` | `—` | Called when the user submits. The signature shows the submitted payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L17) |
| `inputPlaceholder` | `string` | `'Type a message...'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L19) |
| `disableInput` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L21) |
| `variant` | `Variant` `"default"``"glassy"``"minimal"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L23) |
| `size` | `Size` `"sm"``"md"``"lg"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L25) |
| `showTimestamps` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L27) |
| `enableAttachments` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L29) |
| `enableContextPicker` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L31) |
| `selectedContextElements` | `{ id: string; name: string; }[]` | `[]` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L33) |
| `onContextPickerClick` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L35) |
| `onRemoveContextElement` | `((id: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L37) |
| `isLoading` | `boolean` | `false` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L39) |
| `loadingText` | `string` | `'Loading...'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L41) |
| `styles` | `ChatWidgetStyles` | `{}` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L43) |
| `maxHeight` | `string \| number` | `'600px'` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `none \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `none` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :-----: \| :----: \| :---: \| \| **1** \| **1** \| **1.3** \| **12** \| **7** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatWidget/ChatWidget/ChatWidget.props.ts#L45) |

Common inherited styling props (7)

**ChatWidget inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Command

@app-studio/components

# Command

A versatile component for searching, filtering, and executing commands or actions.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command.tsx)

## Import

```ts
import { Command } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Command } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { HomeIcon, SettingsIcon, UserIcon, InfoIcon, SearchIcon } from '@app-studio/components';

export const DefaultCommand = () => {
  const [open, setOpen] = useState(false);

  const commands = [
    {
      id: 'home',
      name: 'Home',
      description: 'Go to home page',
      icon: <HomeIcon widthHeight={16} />,
      shortcut: '⌘H',
      onSelect: () => console.log('Home selected'),
    },
    {
      id: 'settings',
      name: 'Settings',
      description: 'Open settings page',
      icon: <SettingsIcon widthHeight={16} />,
      shortcut: '⌘S',
      onSelect: () => console.log('Settings selected'),
    },
    {
      id: 'profile',
      name: 'Profile',
      description: 'View your profile',
      icon: <UserIcon widthHeight={16} />,
      shortcut: '⌘P',
      onSelect: () => console.log('Profile selected'),
    },
    {
      id: 'help',
      name: 'Help',
      description: 'Get help and support',
      icon: <InfoIcon widthHeight={16} />,
      shortcut: '⌘?',
      onSelect: () => console.log('Help selected'),
    },
    {
      id: 'search',
      name: 'Search',
      description: 'Search for content',
      icon: <SearchIcon widthHeight={16} />,
      shortcut: '⌘K',
      onSelect: () => console.log('Search selected'),
    },
  ];

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>
      <Command
        open={open}
        onOpenChange={setOpen}
        commands={commands}
        placeholder="Search commands..."
      />
    </>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Command**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` Required | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L12) |
| `onOpenChange` Required | `(open: boolean) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L14) |
| `groups` | `CommandGroup[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L16) |
| `commands` | `CommandItem[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L18) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L20) |
| `size` | `CommandSize` `"sm"``"md"``"lg"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L22) |
| `variant` | `CommandVariant` `"outline"``"default"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L24) |
| `filter` | `((value: string, item: CommandItem) => boolean)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L26) |
| `emptyState` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L28) |
| `footer` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L30) |
| `views` | `CommandStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L32) |

### Command.Input

**Command.Input**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` Required | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L38) |
| `onValueChange` Required | `(value: string) => void` | `—` | Called when the selected value changes.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L40) |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L42) |
| `views` | `{ container?: ViewProps; input?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L44) |

### Command.List

**Command.List**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L51) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L53) |

### Command.Group

**Command.Group**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` Required | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L59) |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L61) |
| `views` | `{ container?: ViewProps; heading?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L63) |

### Command.Item

**Command.Item**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` Required | `CommandItem` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L70) |
| `selected` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L72) |
| `onSelect` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L74) |
| `views` | `{ container?: ViewProps; icon?: ViewProps; content?: ViewProps; name?: ViewProps; description?: ViewProps; shortcut?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L76) |

### Command.Empty

**Command.Empty**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L87) |
| `views` | `{ container?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Command/Command/Command.props.ts#L89) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/DragAndDrop

@app-studio/components

# Drag and Drop

A drag-and-drop component for reordering items with touch and mouse support.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop.tsx)

## Import

```ts
import { DragAndDrop } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, Text, View } from 'app-studio';
import { DragAndDrop } from '@app-studio/components';

const tasks = [
  { id: 1, title: 'Design review', color: 'color-blue-500' },
  { id: 2, title: 'Write tests', color: 'color-green-500' },
  { id: 3, title: 'Ship release', color: 'color-purple-500' },
];

export const CardsDragAndDrop = () => (
  <DragAndDrop
    items={tasks}
    onChange={(next) => console.log('order', next)}
    itemProps={{ marginBottom: 8 }}
    renderItem={(item: (typeof tasks)[number]) => (
      <Horizontal
        alignItems="center"
        gap={10}
        padding={12}
        borderRadius={10}
        backgroundColor="color-white"
        borderWidth={1}
        borderStyle="solid"
        borderColor="color-gray-200"
      >
        <View
          widthHeight={10}
          borderRadius={999}
          backgroundColor={item.color}
        />
        <Text color="color-gray-800" fontWeight="600">
          {item.title}
        </Text>
      </Horizontal>
    )}
  />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DragAndDrop**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` Required | `any[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L4) |
| `onChange` | `((items: any[]) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L6) |
| `renderItem` | `((item: any, index: number) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L8) |
| `containerProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L10) |
| `itemProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DragAndDrop/DragAndDrop/DragAndDrop.props.ts#L12) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/DropZone

@app-studio/components

# DropZone

The `DropZone` component provides a drag-and-drop area for file uploads. It extends the functionality of the `Uploader` component but offers a specific UI optimized for dropping files. It supports single and multiple file selection, custom content, and image previews.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone.tsx)

## Import

```ts
import { DropZone } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { DropZone } from '@app-studio/components';

export const DefaultDropZone = () => (
  <Vertical gap={12} width="100%">
    <DropZone
      text="Tap to choose a file"
      onFileSelect={(file) => console.log('selected', file?.name)}
    />
  </Vertical>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**DropZone**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L6) |
| `containerProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L8) |
| `text` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L10) |
| `textProps` | `TextProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L12) |
| `disabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L14) |
| `imageProps` | `ImageProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L16) |
| `previewUrl` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L18) |
| `selectedFiles` | `File[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L20) |
| `onRemove` | `((index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/DropZone/DropZone/DropZone.props.ts#L23) |
| `accept` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L6) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L8) |
| `onFileSelect` | `((file: File) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L10) |
| `onMultipleFileSelect` | `((files: File[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L12) |
| `validateFile` | `((file: File) => string \| null)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L14) |
| `onError` | `((error: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L16) |
| `thumbnail` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L18) |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L20) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/EditComponent

Repository module

# EditComponent

Attach an editing toolbar to a selected DOM element in the repository editor. Choose a target element and handle tool actions explicitly.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx)

> This module is available in the repository and is not exported from the published package. The example uses its repository import path.

## Import

```ts
import { EditComponent } from 'src/components/EditComponent/EditComponent';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { EditComponent } from 'src/components/EditComponent/EditComponent';
import { Vertical } from 'app-studio';

export function EditComponentExample() {
  const [target, setTarget] = useState<HTMLElement | null>(null);
  return (
    <Vertical gap={16}>
      <button type="button" onClick={(event) => setTarget(event.currentTarget)}>
        Select this element to edit it
      </button>
      {target && (
        <EditComponent targetElement={target} onClose={() => setTarget(null)} />
      )}
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**EditComponent**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `targetElement` Required | `HTMLElement \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L18) |
| `defaultToolId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L19) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L20) |
| `side` | `"bottom" \| "left" \| "right" \| "top"` `"bottom"``"left"``"right"``"top"` | `'right'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L21) |
| `sideOffset` | `number` | `12` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L22) |
| `variant` | `"overlay" \| "floating"` `"overlay"``"floating"` | `'floating'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L23) |
| `items` | `ToolbarItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L24) |
| `onToolAction` | `((id: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L25) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Gradient

@app-studio/components

# Gradient

A versatile gradient component supporting linear, radial, and conic gradients with animation capabilities.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient.tsx)

## Import

```ts
import { Gradient } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Gradient } from '@app-studio/components';

export const DefaultDemo = () => (
  <Gradient
    from="color-blue-500"
    to="color-purple-500"
    height="100px"
    width="100%"
  />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Gradient**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `GradientType` `"linear"``"radial"``"conic"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L17) |
| `direction` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L19) |
| `shape` | `RadialShape` `"circle"``"ellipse"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L21) |
| `position` | `string` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L23) |
| `from` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L25) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L27) |
| `colors` | `ColorStop[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L29) |
| `animate` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L31) |
| `animationDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L33) |
| `children` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L35) |
| `views` | `GradientStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Gradient/Gradient/Gradient.props.ts#L37) |

Common inherited styling props (7)

**Gradient inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Center

app-studio

# Center

A layout component that centers its children both horizontally and vertically within its bounds using CSS Flexbox. Perfect for creating loading states, empty states, modal content, hero sections, and any content that needs perfect centering.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Center } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Center, Text } from 'app-studio';

export function CenterExample() {
  return (
    <Center
      height={160}
      width="100%"
      backgroundColor="color-blue-50"
      borderRadius={12}
    >
      <Text color="color-blue-900">Centered on both axes</Text>
    </Center>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Center**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ColorInput

@app-studio/components

# ColorInput

A form-integrated color picker component that allows users to select colors from a predefined palette or enter custom color values.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput.tsx)

## Import

```ts
import { ColorInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { ColorInput } from '@app-studio/components';

export const DefaultColorInput = () => {
  return (
    <Vertical gap={16} width="300px">
      <ColorInput
        label="Background Color"
        placeholder="Choose a color"
        helperText="Select a background color for your theme"
      />

      <ColorInput
        label="Text Color"
        defaultValue="color-gray-800"
        helperText="Select a text color"
      />

      <ColorInput
        label="Accent Color"
        defaultValue="color-blue-500"
        showCustomInput={false}
        helperText="Choose from predefined colors only"
      />
    </Vertical>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ColorInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L16) |
| `error` | `any` | `false` | Error state — usually a string for the error message, or a boolean toggle.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L18) |
| `helperText` | `string` | `—` | Helper text rendered below the input (hint / error / explanation).[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L20) |
| `name` | `string` | `—` | Field name used by forms and Formik bindings.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L22) |
| `label` | `string` | `—` | Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L24) |
| `placeholder` | `string` | `'Select a color'` | Hint displayed while the field is empty.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L26) |
| `isReadOnly` | `boolean` | `false` | Keeps the value visible without allowing edits.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L28) |
| `isDisabled` | `boolean` | `false` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L30) |
| `isAutoFocus` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L32) |
| `onChange` | `((value: string) => void)` | `—` | Called with the new field value. Check the signature for the exact payload.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L34) |
| `onBlur` | `((event: any) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L36) |
| `onClick` | `(() => void)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L38) |
| `onFocus` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L40) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L42) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L44) |
| `shape` | `Shape` `"square"``"rounded"``"pill"``"default"` | `'default'` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L46) |
| `views` | `ColorInputStyles` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L48) |
| `value` | `string` | `—` | Current controlled value. Update it from the matching change callback.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L50) |
| `defaultValue` | `string` | `—` | Initial value for uncontrolled usage.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L52) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L54) |
| `predefinedColors` | `PredefinedColor[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L56) |
| `showCustomInput` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L58) |
| `showRecentColors` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L60) |
| `colorFormat` | `ColorFormat` `"hex"``"rgb"``"hsl"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L62) |
| `maxRecentColors` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L64) |
| `closeOnSelect` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L66) |
| `onChangeComplete` | `((color: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L68) |
| `onOpen` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L70) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/ColorInput/ColorInput/ColorInput.props.ts#L72) |

Common inherited styling props (6)

**ColorInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/File

@app-studio/components

# File

A component for displaying file icons and images with customizable colors and theming support.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/File/File.tsx)

## Import

```ts
import { FileSVG } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, Vertical, Text } from 'app-studio';
import { FileImage, FileSVG } from '@app-studio/components';

export const DefaultFile = () => (
  <Horizontal gap={20} flexWrap="wrap" alignItems="flex-start">
    <Vertical gap={6} alignItems="center">
      <FileImage
        path="https://reactnative.dev/img/tiny_logo.png"
        width={64}
        height={64}
        borderRadius={8}
      />
      <Text fontSize={11} color="color-gray-500">
        FileImage
      </Text>
    </Vertical>
    <Vertical gap={6} alignItems="center">
      <FileSVG
        src="https://reactnative.dev/img/tiny_logo.png"
        width={64}
        height={64}
      />
      <Text fontSize={11} color="color-gray-500">
        FileSVG
      </Text>
    </Vertical>
  </Horizontal>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**FileSVG**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` Required | `string` | `—` | Source URL of the media.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/File/File.tsx#L5) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/File/File.tsx#L6) |
| `views` | `{ container?: ViewProps; image?: ImageProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/File/File.tsx#L8) |

Common inherited styling props (7)

**FileSVG inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Form

app-studio

# Form

A semantic web form built on App Studio primitives. Connect submission and field state explicitly, or use the Formik wrappers for validation.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Form } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Form, Text, Vertical } from 'app-studio';
import { TextField } from '@app-studio/components';
import { Button } from '@app-studio/components';

export function FormExample() {
  const [name, setName] = useState('');
  const [saved, setSaved] = useState('');
  return (
    <Form
      onSubmit={(event: React.FormEvent) => {
        event.preventDefault();
        setSaved(name);
      }}
    >
      <Vertical gap={16} maxWidth={360}>
        <TextField label="Workspace name" value={name} onChange={setName} />
        <Button type="submit" isDisabled={!name.trim()}>
          Save workspace
        </Button>
        <Text role="status">
          {saved ? `Saved: ${saved}` : 'No workspace saved yet.'}
        </Text>
      </Vertical>
    </Form>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Form**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Horizontal

app-studio

# Horizontal

Aligns child components horizontally, with optional reverse order.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Horizontal } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Horizontal, View } from 'app-studio';

export function HorizontalExample() {
  return (
    <Horizontal gap={12} flexWrap="wrap">
      {['Build', 'Compose', 'Ship'].map((label) => (
        <View
          key={label}
          padding={16}
          backgroundColor="color-blue-50"
          borderRadius={8}
        >
          {label}
        </View>
      ))}
    </Horizontal>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Horizontal**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Label

Repository module

# Label

A semantic text element designed for form labels and descriptive text with comprehensive typography options, accessibility features, and flexible styling. Perfect for form fields, section headers, and any text that needs semantic meaning.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label.tsx)

> This module is available in the repository and is not exported from the published package. The example uses its repository import path. For application forms, use the [TextField](https://app-studio-6167b.web.app/docs/TextField) label prop.

## Import

```ts
import { Label } from 'src/components/Form/Label/Label';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Label } from 'src/components/Form/Label/Label';
import { Vertical } from 'app-studio';

export function LabelExample() {
  return (
    <Vertical gap={8}>
      <Label htmlFor="docs-label-input">Workspace</Label>
      <input id="docs-label-input" placeholder="Your workspace" />
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Label**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L6) |
| `heading` | `Headings` `"h1"``"h2"``"h3"``"h4"``"h5"``"h6"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L8) |
| `isItalic` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L10) |
| `isStriked` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L12) |
| `isUnderlined` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L14) |
| `size` | `number \| Sizes` | `'sm'` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L16) |
| `weight` | `TextWeights` `"light"``"medium"``"normal"``"thin"``"bold"``"black"``"hairline"``"semiBold"``"extraBold"` | `'normal'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L18) |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L20) |
| `dropDown` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L22) |
| `error` | `string \| boolean` | `—` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L25) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L29) |
| `helperText` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Additional guidance displayed with the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L32) |
| `views` | `ViewProps` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Form/Label/Label/Label.props.ts#L35) |

Common inherited styling props (7)

**Label inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/ShareButton

@app-studio/components

# ShareButton

A button that allows users to share content from the web application using the device's native sharing capabilities.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton.tsx)

## Import

```ts
import { ShareButton } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { ShareButton } from '@app-studio/components';

export const DefaultShareButton = () => (
  <ShareButton
    label="Share this page"
    shareData={{
      title: 'App Studio',
      text: 'Découvrez les composants App Studio.',
      url: 'https://appstudio.example.com',
    }}
    onUnsupported={() =>
      alert('Le partage natif est indisponible sur ce navigateur.')
    }
  />
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ShareButton**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shareData` Required | `ShareData` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L8) |
| `label` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Visible label describing this control.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L10) |
| `onShareStart` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L12) |
| `onShareSuccess` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L14) |
| `onShareCancel` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L16) |
| `onShareError` | `((error: unknown) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L18) |
| `onUnsupported` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L20) |
| `disableWhenUnsupported` | `boolean` | `true` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L22) |
| `onClick` | `((...args: any) => any)` | `—` | Called when the user activates the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ShareButton/ShareButton/ShareButton.props.ts#L24) |
| `color` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **3** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L62) |
| `children` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L19) |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L75) |
| `to` | `string` | `—` | Destination URL or application route.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L21) |
| `keys` | `any[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L97) |
| `shadow` | `ViewProps \| Shadow \| Elevation` | `—` | Shadow or elevation styling.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L49) |
| `animation` | `Animation` `"borderMoving"``"animatedStroke"``"borderReveal"` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| **43** \| **16** \| **9** \| **12** \| **10** \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L59) |
| `views` | `{ container?: ViewProps; content?: ViewProps; loader?: ViewProps; icon?: ViewProps; link?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L88) |
| `shape` | `Shape` `"square"``"rounded"``"pill"` | `—` | Shape preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L51) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L47) |
| `variant` | `string` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L56) |
| `ariaLabel` | `string` | `—` | [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L53) |
| `isDisabled` | `boolean` | `—` | Disables user interaction.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L33) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L23) |
| `loaderProps` | `LoaderProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L25) |
| `loaderPosition` | `LoaderPosition` `"left"``"right"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L27) |
| `icon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L29) |
| `iconPosition` | `IconPosition` `"bottom"``"left"``"right"``"top"` | `—` | Position of the icon relative to the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L31) |
| `isFilled` | `boolean` | `—` | Expands the component to the available width.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L35) |
| `isAuto` | `boolean` | `—` | Sizes the component to fit its content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L37) |
| `isIconRounded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L39) |
| `isExternal` | `boolean` | `—` | Opens an external link in a new browsing context.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L43) |
| `isIcon` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L45) |
| `textColor` | `string` | `—` | Explicit foreground color for the text.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L65) |
| `borderMovingDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L78) |
| `borderMovingGradientColors` | `string[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L79) |
| `animatedStrokeAccentColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L85) |
| `animatedStrokeTextColor` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L86) |
| `config` | `any` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L95) |
| `leftIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L101) |
| `rightIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L103) |
| `startIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L105) |
| `endIcon` | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Button/Button/Button.props.ts#L107) |

Common inherited styling props (6)

**ShareButton inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Text

app-studio

# Text

Render semantic text with typography, color tokens, emphasis, and line limits. Choose the appropriate element with as and customize its styling through props.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Text } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Text, Vertical } from 'app-studio';

export function TextExample() {
  return (
    <Vertical gap={12}>
      <Text as="h3" fontSize={24} fontWeight="bold">
        Typography, your way.
      </Text>
      <Text color="color-blue-800">
        Theme and palette tokens work here too.
      </Text>
      <Text isItalic>Keep content semantic and readable.</Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Text**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `backgroundColor` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `transparent` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \| |
| `toUpperCase` | `boolean` | `—` | See the type and source declaration for this property. |
| `bgColor` | `string` | `—` | Background color used to automatically compute a readable text color |
| `isItalic` | `boolean` | `—` | See the type and source declaration for this property. |
| `isStriked` | `boolean` | `—` | See the type and source declaration for this property. |
| `isUnderlined` | `boolean` | `—` | See the type and source declaration for this property. |
| `isSub` | `boolean` | `—` | See the type and source declaration for this property. |
| `isSup` | `boolean` | `—` | See the type and source declaration for this property. |
| `maxLines` | `number` | `—` | See the type and source declaration for this property. |
| `weight` | `string \| number` | `—` | Shorthand for fontWeight; accepts numeric (100-900) or named weights ("normal", "bold", "semibold", etc.). Convenience alias for the underlying fontWeight CSS property. |
| `variant` | `string` | `—` | Optional style variant identifier. Free-form string used by component wrappers and design systems to dispatch typography presets. |
| `size` | `string \| number` | `—` | Shorthand for fontSize; accepts numeric or named sizes (e.g. 'sm', 14, '14px'). |
| `spacing` | `string \| number` | `—` | Shorthand for letterSpacing; accepts numeric or named tracking values. |
| `heading` | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` `"h1"``"h2"``"h3"``"h4"``"h5"``"h6"` | `—` | Renders a heading preset (h1–h6): sets the semantic element along with a matching font size, weight, and line height from the design-system scale. |
| `numberOfLines` | `number \| null` | `—` | See the type and source declaration for this property. |
| `selectable` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.

---

Source: https://app-studio-6167b.web.app/docs/Vertical

app-studio

# Vertical

A flexible layout component that arranges its children in a vertical stack using CSS Flexbox. Perfect for creating column layouts, forms, navigation menus, and any vertical arrangement of elements with powerful spacing and alignment options.

[View component source](https://github.com/rize-network/app-studio)

## Import

```ts
import { Vertical } from 'app-studio';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical, Text } from 'app-studio';

export function VerticalExample() {
  return (
    <Vertical
      gap={12}
      padding={24}
      backgroundColor="color-blue-50"
      borderRadius={12}
    >
      <Text fontWeight="bold">A simple vertical stack</Text>
      <Text>Use gap to space children consistently.</Text>
      <Text color="color-blue-800">Compose it with any component.</Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Vertical**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | `—` | Source URL of the media. |
| `alt` | `string` | `—` | See the type and source declaration for this property. |
| `controls` | `boolean` | `—` | See the type and source declaration for this property. |
| `muted` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoPlay` | `boolean` | `—` | See the type and source declaration for this property. |
| `loop` | `boolean` | `—` | See the type and source declaration for this property. |
| `poster` | `string` | `—` | See the type and source declaration for this property. |
| `playsInline` | `boolean` | `—` | See the type and source declaration for this property. |
| `preload` | `"" \| "metadata" \| "auto" \| "none"` `""``"metadata"``"auto"``"none"` | `—` | See the type and source declaration for this property. |
| `crossOrigin` | `"" \| "anonymous" \| "use-credentials"` `""``"anonymous"``"use-credentials"` | `—` | See the type and source declaration for this property. |
| `srcSet` | `string` | `—` | See the type and source declaration for this property. |
| `sizes` | `string` | `—` | See the type and source declaration for this property. |
| `loading` | `"eager" \| "lazy"` `"eager"``"lazy"` | `—` | See the type and source declaration for this property. |
| `referrerPolicy` | `react.HTMLAttributeReferrerPolicy` `""``"no-referrer"``"no-referrer-when-downgrade"``"origin"``"origin-when-cross-origin"``"same-origin"``"strict-origin"``"strict-origin-when-cross-origin"``"unsafe-url"` | `—` | See the type and source declaration for this property. |
| `decoding` | `"auto" \| "async" \| "sync"` `"auto"``"async"``"sync"` | `—` | See the type and source declaration for this property. |
| `name` | `string` | `—` | Field name used by forms and Formik bindings. |
| `value` | `string \| number \| readonly string[]` | `—` | Current controlled value. Update it from the matching change callback. |
| `defaultValue` | `string \| number \| readonly string[]` | `—` | Initial value for uncontrolled usage. |
| `multiple` | `boolean` | `—` | See the type and source declaration for this property. |
| `disabled` | `boolean` | `—` | Disables user interaction. |
| `readOnly` | `boolean` | `—` | See the type and source declaration for this property. |
| `required` | `boolean` | `—` | See the type and source declaration for this property. |
| `autoComplete` | `string` | `—` | See the type and source declaration for this property. |
| `autoFocus` | `boolean` | `—` | See the type and source declaration for this property. |
| `placeholder` | `string` | `—` | Hint displayed while the field is empty. |
| `pattern` | `string` | `—` | See the type and source declaration for this property. |
| `min` | `string \| number` | `—` | Minimum allowed value. |
| `max` | `string \| number` | `—` | Maximum allowed value. |
| `minLength` | `number` | `—` | Minimum permitted input length. |
| `maxLength` | `number` | `—` | Maximum permitted input length. |
| `step` | `string \| number` | `—` | Increment between allowed values. |
| `form` | `string` | `—` | See the type and source declaration for this property. |
| `formAction` | `string` | `—` | See the type and source declaration for this property. |
| `formEncType` | `string` | `—` | See the type and source declaration for this property. |
| `formMethod` | `"dialog" \| "get" \| "post"` `"dialog"``"get"``"post"` | `—` | See the type and source declaration for this property. |
| `formNoValidate` | `boolean` | `—` | See the type and source declaration for this property. |
| `formTarget` | `string` | `—` | See the type and source declaration for this property. |
| `rows` | `number` | `—` | See the type and source declaration for this property. |
| `cols` | `number` | `—` | See the type and source declaration for this property. |
| `wrap` | `string` | `—` | HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here. |
| `list` | `string` | `—` | See the type and source declaration for this property. |
| `accept` | `string` | `—` | See the type and source declaration for this property. |
| `capture` | `boolean \| "user" \| "environment"` | `—` | See the type and source declaration for this property. |
| `colSpan` | `number` | `—` | See the type and source declaration for this property. |
| `rowSpan` | `number` | `—` | See the type and source declaration for this property. |
| `headers` | `string` | `—` | See the type and source declaration for this property. |
| `scope` | `string` | `—` | See the type and source declaration for this property. |
| `href` | `string` | `—` | See the type and source declaration for this property. |
| `target` | `string` | `—` | See the type and source declaration for this property. |
| `rel` | `string` | `—` | See the type and source declaration for this property. |
| `hrefLang` | `string` | `—` | See the type and source declaration for this property. |
| `download` | `string \| boolean` | `—` | See the type and source declaration for this property. |
| `xmlns` | `string` | `—` | See the type and source declaration for this property. |
| `viewBox` | `string` | `—` | See the type and source declaration for this property. |
| `preserveAspectRatio` | `string` | `—` | See the type and source declaration for this property. |
| `open` | `boolean` | `—` | See the type and source declaration for this property. |
| `scoped` | `boolean` | `—` | See the type and source declaration for this property. |
| `reversed` | `boolean` | `—` | See the type and source declaration for this property. |
| `start` | `number` | `—` | See the type and source declaration for this property. |
| `htmlFor` | `string` | `—` | See the type and source declaration for this property. |
| `on` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `only` | `string[]` | `—` | See the type and source declaration for this property. |
| `css` | `any` | `—` | See the type and source declaration for this property. |
| `onPress` | `any` | `—` | See the type and source declaration for this property. |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `className` | `string` | `—` | See the type and source declaration for this property. |
| `blend` | `boolean` | `—` | See the type and source declaration for this property. |
| `type` | `string` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `style` | `react.CSSProperties` | `—` | See the type and source declaration for this property. |
| `widthHeight` | `string \| number` | `—` | See the type and source declaration for this property. |
| `children` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component. |
| `srcDoc` | `string` | `—` | See the type and source declaration for this property. |
| `sandbox` | `string` | `—` | See the type and source declaration for this property. |
| `to` | `string` | `—` | Destination URL or application route. |
| `keys` | `any[]` | `—` | See the type and source declaration for this property. |
| `sx` | `any` | `—` | See the type and source declaration for this property. |
| `itemStyle` | `any` | `—` | See the type and source declaration for this property. |
| `paddingX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginX` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginY` | `string \| number` | `—` | See the type and source declaration for this property. |
| `hoverBackgroundColor` | `string` | `—` | See the type and source declaration for this property. |
| `hover` | `boolean \| Record<string, any>` | `—` | See the type and source declaration for this property. |
| `hoverStyle` | `Record<string, any>` | `—` | See the type and source declaration for this property. |
| `checked` | `boolean` | `—` | See the type and source declaration for this property. |
| `defaultChecked` | `boolean` | `—` | See the type and source declaration for this property. |
| `transition` | `string` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. **Syntax**: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| **26** \| **16** \| **9** \| **12** \| **10** \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \| |
| `before` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `after` | View type `string \| number \| bigint \| boolean \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| react.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react.ReactPortal \| react.ReactElement<unknown, string \| react.JSXElementConstructor<any>> \| Iterable<react.ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property. |
| `theme` | `Partial<Theme>` | `—` | Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`). |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `animateOn` | `"View" \| "Mount" \| "Both" \| "Scroll"` `"View"``"Mount"``"Both"``"Scroll"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_visited` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_disabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_enabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_checked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_unchecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_invalid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_valid` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_required` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_optional` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_selected` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_target` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_onlyChild` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_firstOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_lastOfType` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_empty` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusVisible` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focusWithin` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_placeholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_odd` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_even` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_groupDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerHover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerFocus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerActive` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerDisabled` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_peerChecked` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_before` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_after` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLetter` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_firstLine` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_selection` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_backdrop` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_marker` | `CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitAutofill` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitContactsAutoFillButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitInnerSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitOuterSpinButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_webkitSearchCancelButton` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozPlaceholder` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_mozFocusInner` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `paddingHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginHorizontal` | `string \| number` | `—` | See the type and source declaration for this property. |
| `paddingVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `marginVertical` | `string \| number` | `—` | See the type and source declaration for this property. |
| `animate` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateIn` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `animateOut` | `AnimationProps \| AnimationProps[]` | `—` | See the type and source declaration for this property. |
| `shadow` | `number \| boolean \| Shadow` | `—` | Shadow or elevation styling. |
| `WebkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `webkitUserDrag` | `import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all"``"text"``"auto"``"none"``"-moz-initial"``"inherit"``"initial"``"revert"``"revert-layer"``"unset"``"-moz-none"` | `—` | See the type and source declaration for this property. |
| `safeArea` | `boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]` | `—` | `true`/`'all'` = all four edges; or a single edge / array of edges. |
| `safeAreaTop` | `boolean` | `—` | Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`. |
| `safeAreaBottom` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaLeft` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaRight` | `boolean` | `—` | See the type and source declaration for this property. |
| `safeAreaEdges` | `SafeAreaEdge[]` | `—` | Explicit edge list, merged with `safeArea`. |
| `ignoreSafeArea` | `boolean` | `—` | Force safe area OFF — wins over every other safe-area prop. |
| `safeAreaMode` | `SafeAreaMode` `"margin"``"padding"` | `—` | Apply the inset as padding (default) or margin. |
| `accessibilityLabel` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityLiveRegion` | `"none" \| "polite" \| "assertive"` `"none"``"polite"``"assertive"` | `—` | See the type and source declaration for this property. |
| `accessibilityRole` | `string \| null` | `—` | See the type and source declaration for this property. |
| `accessibilityState` | View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessibilityValue` | `{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }` | `—` | See the type and source declaration for this property. |
| `accessible` | `boolean` | `—` | See the type and source declaration for this property. |
| `importantForAccessibility` | `"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto"``"yes"``"no"``"no-hide-descendants"` | `—` | See the type and source declaration for this property. |
| `nativeID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `onLayout` | `((e: LayoutEvent) => void)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onMoveShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onResponderEnd` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderGrant` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderMove` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderReject` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderRelease` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderStart` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminate` | `((e: any) => void)` | `—` | See the type and source declaration for this property. |
| `onResponderTerminationRequest` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onScrollShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onSelectionChangeShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponder` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `onStartShouldSetResponderCapture` | `((e: any) => boolean)` | `—` | See the type and source declaration for this property. |
| `testID` | `string \| null` | `—` | See the type and source declaration for this property. |
| `dataSet` | `Object \| null` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.