open-index/open-npm huggingface dataset:
npm package: @publicai-ux/test123
Description: This component can be used in both React applications and traditional HTML/JS projects.
Latest version: 1.0.1


# Test Component

This component can be used in both React applications and traditional HTML/JS projects.

## React Usage

```jsx
import { Test } from '@publicai-ux/test123/Test';
import '@publicai-ux/test123/styles.css';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Test />
    </div>
  );
}
```

## HTML/JS Usage

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="node_modules/@publicai-ux/test123/styles.css">
</head>
<body>
  <!-- Include the component HTML -->
  <div data-component="test">
    <!-- Component will be inserted here -->
  </div>

  <!-- Initialize the component -->
  <script type="module">
    import { initComponents } from '@publicai-ux/test123';
    
    // Initialize all components
    initComponents();
  </script>
</body>
</html>
```

## Individual JS Handlers

You can also use the handlers directly:

```js
import TestHandlers from '@publicai-ux/test123/Test.js';

// Initialize manually
const element = document.querySelector('.my-component');
TestHandlers.init(element);
```
npm package: @publicai-ux/ui_kit
Description: This component can be used in both React applications and traditional HTML/JS projects.
Latest version: 1.1.0


# Component835 Component

This component can be used in both React applications and traditional HTML/JS projects.

## React Usage

```jsx
import { Component835 } from '@publicai-ux/ui_kit/Component835';
import '@publicai-ux/ui_kit/styles.css';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Component835 />
    </div>
  );
}
```

## HTML/JS Usage

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="node_modules/@publicai-ux/ui_kit/styles.css">
</head>
<body>
  <!-- Include the component HTML -->
  <div data-component="component835">
    <!-- Component will be inserted here -->
  </div>

  <!-- Initialize the component -->
  <script type="module">
    import { initComponents } from '@publicai-ux/ui_kit';
    
    // Initialize all components
    initComponents();
  </script>
</body>
</html>
```
npm package: @publicai-ux/ux-forms
Description: This component can be used in both React applications and traditional HTML/JS projects.
Latest version: 1.0.0


# Input Component

This component can be used in both React applications and traditional HTML/JS projects.

## React Usage

```jsx
import { Input } from '@publicai-ux/ux-forms/Input';
import '@publicai-ux/ux-forms/styles.css';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Input />
    </div>
  );
}
```

## HTML/JS Usage

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="node_modules/@publicai-ux/ux-forms/styles.css">
</head>
<body>
  <!-- Include the component HTML -->
  <div data-component="input">
    <!-- Component will be inserted here -->
  </div>

  <!-- Initialize the component -->
  <script type="module">
    import { initComponents } from '@publicai-ux/ux-forms';
    
    // Initialize all components
    initComponents();
  </script>
</body>
</html>
```

## Individual JS Handlers

You can also use the handlers directly:

```js
import InputHandlers from '@publicai-ux/ux-forms/Input.js';

// Initialize manually
const element = document.querySelector('.my-component');
InputHandlers.init(element);
```
npm package: @publicai-ux/ux-input
Description: This component can be used in both React applications and traditional HTML/JS projects.
Latest version: 1.0.0


# Newinput Component

This component can be used in both React applications and traditional HTML/JS projects.

## React Usage

```jsx
import { Newinput } from '@publicai-ux/ux-input/Newinput';
import '@publicai-ux/ux-input/styles.css';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Newinput />
    </div>
  );
}
```

## HTML/JS Usage

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="node_modules/@publicai-ux/ux-input/styles.css">
</head>
<body>
  <!-- Include the component HTML -->
  <div data-component="newinput">
    <!-- Component will be inserted here -->
  </div>

  <!-- Initialize the component -->
  <script type="module">
    import { initComponents } from '@publicai-ux/ux-input';
    
    // Initialize all components
    initComponents();
  </script>
</body>
</html>
```

## Individual JS Handlers

You can also use the handlers directly:

```js
import NewinputHandlers from '@publicai-ux/ux-input/Newinput.js';

// Initialize manually
const element = document.querySelector('.my-component');
NewinputHandlers.init(element);
```
npm package: @publicai-ux/ux-public-forms
Description: Input field component with enhanced functionality
Latest version: 1.0.0

# Newinput Component

Input field component with enhanced functionality

## Installation

```
npm install @publicai-ux/ux-public-forms
```

## Component Specifications

You can programmatically access the component specifications:

```jsx
import { Newinput } from '@publicai-ux/ux-public-forms';
console.log(Newinput.getSpecs());
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | string | `` | Additional CSS class names |
| `value` | string | `` | Input value |
| `onChange` | function | `(value) => {}` | Called when input value changes |
| `placeholder` | string | `` | Placeholder text |
| `label` | string | `` | Label text |
| `suggestions` | array | `[]` | Array of suggestion items |
| `onSuggestionSelect` | function | `(suggestion) => {}` | Called when a suggestion is selected |
| `onClearHistory` | function | `() => {}` | Called when clear history is clicked |
| `error` | string | `` | Error message to display |
| `comment` | string | `` | Helper text or comment |

## Example Usage

```jsx
import React, { useState } from 'react';
import { Newinput } from 'Newinput';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');
  const suggestions = [
    { id: '1', text: 'Option 1', context: 'Context 1' },
    { id: '2', text: 'Option 2', context: 'Context 2' }
  ];

  return (
    <Newinput
      className="custom-class"
      value={inputValue}
      onChange={setInputValue}
      placeholder="Enter text here..."
      label="Example Label"
      suggestions={suggestions}
      onSuggestionSelect={(suggestion) => setInputValue(suggestion.text)}
      onClearHistory={() => console.log('History cleared')}
      error=""
      comment="Additional information about this field"
    />
  );
}

export default ExampleComponent;
```

## React Usage

```jsx
import { Newinput } from '@publicai-ux/ux-public-forms';
import '@publicai-ux/ux-public-forms/styles.css';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <Newinput />
    </div>
  );
}
```

## HTML/JS Usage

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="node_modules/@publicai-ux/ux-public-forms/styles.css">
</head>
<body>
  <!-- Include the component HTML -->
  <div data-component="newinput">
    <!-- Component will be inserted here -->
  </div>

  <!-- Initialize the component -->
  <script type="module">
    import { initComponents } from '@publicai-ux/ux-public-forms';
    
    // Initialize all components
    initComponents();
  </script>
</body>
</html>
```