open-index/open-npm huggingface dataset:
npm package: @lcap-ui/circular-progress
Description: LCAP Circular Progress
Latest version: 0.0.10

# Circular Progress

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

- Module **@lcap-ui/circular-progress**
- Import styles:
  - Using CSS Loader
    - import '@lcap-ui/circular-progress/styles';
  - Or include stylesheets
    - **'@lcap-ui/circular-progress/circular-progress.css'**

## Basic Usage

```jsx
<CircularProgress />
```

```jsx
<>
  <CircularProgress progress={0.3} />
  <CircularProgress progress={0.6} />
  <CircularProgress progress={0.9} />
</>
```

## Sizing

```jsx
<>
  <CircularProgress size="xsmall" />
  <CircularProgress size="small" />
  <CircularProgress size="medium" />
  <CircularProgress size="large" />
  <CircularProgress size="xlarge" />
  <CircularProgress size={72} />
</>
```

## Usage with other components

```jsx
<>
  <Button
    icon={<CircularProgress theme="secondary" />}
    label="Cookies"
  />

  <List>
    <SimpleListItem graphic={<CircularProgress />} text="Pizza" />
    <SimpleListItem graphic="favorite" text="Icecream" />
  </List>

  <Chip icon={<CircularProgress />} label="Donuts" />
</>
```

## CircularProgress

A Circular Progress indicator.

### Props

| Name | Type | Description |
|------|------|-------------|
| `max` | `undefined \| number` | Max value for determinate progress bars. |
| `min` | `undefined \| number` | Min value for determinate progress bars. |
| `progress` | `undefined \| number` | Value for determinate progress bars. |
| `size` | `"xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| number` | The size of the loader you would like to render. |
npm package: @lcap-ui/elevation
Description: LCAP Elevation component
Latest version: 0.0.10

# Elevation

Elevation is the relative distance between two surfaces along the z-axis.

- Module **@lcap-ui/elevation**
- Import styles:
  - Using CSS Loader
    - import '@lcap-ui/elevation/styles';
  - Or include stylesheets
    - **'@material/elevation/dist/mdc.elevation.css'**
- MDC Docs: [https://material.io/develop/web/components/elevation/](https://material.io/develop/web/components/elevation/)

```jsx
<>
  {Array(25)
    .fill(undefined)
    .map((val, i) => (
      <Elevation z={i} key={i}>
        {i}dp
      </Elevation>
    ))}
</>
```

```jsx
function Example() {
  const [elevation, setElevation] = React.useState(0);

  return (
    <Elevation
      z={elevation}
      transition
      onMouseOver={() => setElevation(24)}
      onMouseOut={() => setElevation(0)}
    >
      Hover Me {elevation}dp
    </Elevation>
  );
}
```

## Wrapping Children

You can avoid adding extra DOM nodes by using the `wrap` prop on elevation. This will apply the classes directly to the child component. Additionally, Elevation is simply a `className`, so you can achieve the same effect by adding `className="mdc-elevation--z15"`.

```jsx
<Elevation z={21} wrap>
  <span>Wrapped!</span>
</Elevation>
```

## Elevation

The Elevation Component

### Props

| Name | Type | Description |
|------|------|-------------|
| `transition` | `undefined \| false \| true` | Allows for smooth transitions between elevations when the z value changes. |
| `wrap` | `undefined \| false \| true` | Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. |
| `z` | `number \| string` | A number from 0 - 24 for different levels of elevation |
npm package: @lcap-ui/linear-progress
Description: LCAP-UI LinearProgress component
Latest version: 0.0.10

# Linear Progress

Progress and activity indicators are visual indications of an app loading content.

- Module **@lcap-ui/linear-progress**
- Import styles:
  - Using CSS Loader
    - import '@lcap-ui/linear-progress/styles';
  - Or include stylesheets
    - **'@material/linear-progress/dist/mdc.linear-progress.css'**
- MDC Docs: [https://material.io/develop/web/components/linear-progress/](https://material.io/develop/web/components/linear-progress/)

```jsx
<LinearProgress progress={0.5} />
```

```jsx
<LinearProgress progress={0.6} buffer={0.8} />
```

```jsx
<LinearProgress />
```

```jsx
<LinearProgress progress={0.2} reversed />
```

## LinearProgress

A component to display linear progress.

### Props

| Name | Type | Description |
|------|------|-------------|
| `buffer` | `undefined \| number` | A Progress buffer float percentage between 0 and 1. |
| `closed` | `undefined \| false \| true` | Hides the progress bar. Adding / removing this prop will trigger an animation in or out. |
| `foundationRef` | `React.Ref<MDCLinearProgressFoundation>` | Advanced: A reference to the MDCFoundation. |
| `progress` | `undefined \| number` | Progress float percentage between 0 and 1. |
| `reversed` | `undefined \| false \| true` | Progress goes from right to left. |
npm package: @lcap-ui/styles
Description: @lcap-ui/styles
Latest version: 0.0.3

# **@lcap-ui/styles**

- Import styles:
  - Using CSS Loader
    - ```import '@lcap-ui/styles';```
  - Or include stylesheets
  - **'@lcap-ui/styles/dist/lcap-ui-styles.min.css'**