open-index/open-npm huggingface dataset:
npm package: @ggwan/input
Description: A collection of customizable input components built with React and shadcn/ui
Author: Marsindo
Latest version: 1.5.2

# @ggwan/input

A collection of customizable input components built with React and shadcn/ui.

## Installation

```bash
npm install @ggwan/input
# or
yarn add @ggwan/input
# or
pnpm add @ggwan/input
```

## Usage

### InputText Component

```jsx
import { InputText } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputText 
        placeholder="Enter text here..." 
        className="w-full"
      />
    </div>
  );
}
```

### InputNumber Component

```jsx
import { InputNumber } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputNumber 
        placeholder="Enter number..." 
        min={0}
        max={100}
        step={1}
        className="w-full"
      />
    </div>
  );
}
```

### InputDate Component

```jsx
import { InputDate } from '@ggwan/input';

function App() {
  return (
    <div>
      <InputDate 
        min="2024-01-01"
        max="2024-12-31"
        className="w-full"
      />
    </div>
  );
}
```

### Base Input Component

```jsx
import { Input } from '@ggwan/input';

function App() {
  return (
    <div>
      <Input 
        type="email"
        placeholder="Enter email..." 
        className="w-full"
      />
    </div>
  );
}
```

## Components

- `Input`: Base input component (shadcn/ui Input)
- `InputText`: Text input component 
- `InputNumber`: Number input component with min/max/step props
- `InputDate`: Date input component with min/max date props

## Props

All components accept standard HTML input props plus:

- `className`: string - Additional CSS classes
- `placeholder`: string - Placeholder text
- `disabled`: boolean - Disable the input

### InputNumber specific props:
- `min`: number - Minimum value
- `max`: number - Maximum value  
- `step`: number - Step increment (default: 1)

### InputDate specific props:
- `min`: string - Minimum date (YYYY-MM-DD format)
- `max`: string - Maximum date (YYYY-MM-DD format)

## Styling

This component uses Tailwind CSS classes and can be customized by passing additional classes through the `className` prop.

## License

MIT
npm package: @ggwan/input-text
Description: A customizable input text component built with React and shadcn/ui
Author: Marsindo
Latest version: 1.1.0

# @marsindo/input-text

A customizable input text component built with React and shadcn/ui.

## Installation

```bash
npm install @marsindo/input-text
# or
yarn add @marsindo/input-text
# or
pnpm add @marsindo/input-text
```

## Usage

```jsx
import { InputText } from '@marsindo/input-text';

function App() {
  return (
    <div>
      <InputText 
        placeholder="Enter text here..." 
        className="w-full"
      />
    </div>
  );
}
```

## Props

The `InputText` component accepts all standard HTML input props:

- `placeholder`: string - Placeholder text
- `value`: string - Input value
- `onChange`: function - Change handler
- `className`: string - Additional CSS classes
- `disabled`: boolean - Disable the input
- And all other HTML input attributes...

## Styling

This component uses Tailwind CSS classes and can be customized by passing additional classes through the `className` prop.

## License

MIT