open-index/open-npm huggingface dataset:
npm package: @ims360/svelte-ivory
Description: A svelte library with a bunch of components and utilities, building upon [skeletons](https://www.skeleton.dev/) design system.   Currently this library is primarily intended for our ([ims360](https://ims360.de/)) internal use, so documentation is sparse a
Latest version: 0.4.21

# Ivory, more than just a [skeleton](https://www.skeleton.dev/)

A svelte library with a bunch of components and utilities, building upon [skeletons](https://www.skeleton.dev/) design system.  
Currently this library is primarily intended for our ([ims360](https://ims360.de/)) internal use, so documentation is sparse at the moment.  
Eventually we will add more documentation and examples to make it easier for devs outside our organization to use.

## Setup

Include this line in your `app.css` file, so the TW classes used in the lib are included:

```css
@source '../node_modules/@ims360/svelte-ivory';
```

_You may need to adjust the path if your `app.css` is not located in `/src`_

## Roadmap

- [x] Basic components (checkbox, toggle)
- [x] Basic layout components (modal, tabs, popover, etc.)
- [x] Table
- [ ] Input components
npm package: @imsabmaverick81/react-ui-control-kit
Description: A React component library with Button, Checkbox, RadioButton, and Dropdown components
Latest version: 1.0.0

# @imsabmaverick81/react-ui-control-kit

A React component library with reusable UI components including Button, Checkbox, RadioButton, and Dropdown.

## Installation

```bash
npm install @imsabmaverick81/react-ui-control-kit
# or
yarn add @imsabmaverick81/react-ui-control-kit
# or
pnpm add @imsabmaverick81/react-ui-control-kit
```

## Usage

```tsx
import {
  Button,
  Checkbox,
  RadioButton,
  Dropdown,
} from "@imsabmaverick81/react-ui-control-kit";
import "@imsabmaverick81/react-ui-control-kit/styles";

function App() {
  return (
    <div>
      <Button primary label="Click me" />

      <Checkbox label="Accept terms" checked={false} />

      <RadioButton label="Option 1" checked={true} />

      <Dropdown
        label="Select Country"
        options={[
          { value: "us", label: "United States" },
          { value: "uk", label: "United Kingdom" },
        ]}
        value=""
        onChange={(value) => console.log(value)}
      />
    </div>
  );
}
```

## Components

### Button

```tsx
<Button
  primary={true} // Primary styling
  disabled={false} // Disable button
  size="medium" // 'small' | 'medium' | 'large'
  stylingMode="contained" // 'contained' | 'outlined' | 'text'
  label="Button" // Button text
  onClick={() => {}} // Click handler
/>
```

### Checkbox

```tsx
<Checkbox
  label="Checkbox label" // Label text
  checked={false} // Checked state
  disabled={false} // Disable checkbox
  size="medium" // 'small' | 'medium' | 'large'
  error="Error message" // Error message
  onChange={(e) => {}} // Change handler
/>
```

### RadioButton

```tsx
<RadioButton
  label="Radio label" // Label text
  checked={false} // Checked state
  disabled={false} // Disable radio
  size="medium" // 'small' | 'medium' | 'large'
  onChange={(e) => {}} // Change handler
/>
```

### Dropdown

```tsx
<Dropdown
  label="Label" // Dropdown label
  placeholder="Select..." // Placeholder text
  options={[
    // Options array
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
  value="" // Selected value (string or string[])
  disabled={false} // Disable dropdown
  multiSelect={false} // Enable multi-select
  isSearch={false} // Enable search filter
  onChange={(value) => {}} // Change handler
/>
```

## Development

```bash
# Install dependencies
npm install

# Run Storybook for development
npm run storybook

# Build the library
npm run build

# Build Storybook documentation
npm run build-storybook
```

## Publishing

1. Update the package name in `package.json` (replace `@imsabmaverick81` with your npm org or remove the scope)
2. Build the library: `npm run build`
3. Publish to npm: `npm publish`

## License

MIT