@tanishraj/ui-kit 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanishraj/ui-kit",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
   "author": "Tanishraj",
   "license": "MIT",

package/readme.md

@@ -75,7 +75,10 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Input,
+  ListBox,
   Link,
+  Modal,
   OrganizationChart,
   Popover,
   Portal,
@@ -110,7 +113,10 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Input,
+  ListBox,
   Link,
+  Modal,
   Popover,
 } from '@tanishraj/ui-kit';
 import { Plus } from 'lucide-react';
@@ -118,6 +124,7 @@ import { useState } from 'react';
 
 export default function Demo() {
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
 
   return (
     <div className='flex items-center gap-4'>
@@ -128,7 +135,28 @@ export default function Demo() {
       <Chip icon={Plus} variant='success'>
         Active
       </Chip>
+      <Input
+        caption='There will be a caption text here'
+        label='Label'
+        placeholder='Placeholder'
+        variant='primary'
+      />
+      <ListBox
+        items={[
+          { label: 'Item Name', value: 'one' },
+          { label: 'Item Name', value: 'two' },
+        ]}
+      />
       <Dropdown variant='primary'>Dropdown</Dropdown>
+      <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
+      <Modal
+        footer={<Button onClick={() => setModalOpen(false)}>Close</Button>}
+        onClose={() => setModalOpen(false)}
+        open={modalOpen}
+        title='Title'
+      >
+        Modal content
+      </Modal>
       <Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
       <Popover
         title='Title'
@@ -217,7 +245,10 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Input,
+  ListBox,
   Link,
+  Modal,
   Popover,
 } from '@tanishraj/ui-kit';
 import { Home, Plus, Tag } from 'lucide-react';
@@ -269,6 +300,35 @@ export function ComponentExamples() {
         Dropdown
       </Dropdown>
 
+      <Input
+        caption='There will be a caption text here'
+        label='Label'
+        leadingIcon={Plus}
+        placeholder='Placeholder'
+        required
+        trailingIcon={Plus}
+        variant='primary'
+      />
+
+      <ListBox
+        items={[
+          { label: 'Item Name', value: 'one' },
+          { label: 'Item Name', value: 'two' },
+          { label: 'Item Name', value: 'three' },
+        ]}
+        selectedValue='two'
+      />
+
+      <Modal
+        footer={<Button variant='primary'>Button</Button>}
+        leadingIcon={Plus}
+        onClose={() => undefined}
+        open={false}
+        title='Title'
+      >
+        Slot Area
+      </Modal>
+
       <Popover
         placement='bottom'
         title='Title'
@@ -297,8 +357,11 @@ export function ComponentExamples() {
 - `Checkbox` and `CheckboxGroup` support `shape="square" | "circle"`, with `square` as the default.
 - `Chip` supports `variant`, `appearance="filled" | "outline"`, `shape`, `size`, `inverted`, optional `icon`, and removable chips via `onClose`.
 - `Divider` supports `orientation="horizontal" | "vertical"` and optional centered content through `children`.
-- `Dropdown` opens a Floating UI menu-style popover list. It shares Button `variant`, `appearance`, `size`, `loading`, `disabled`, `inverted`, and `fullWidth` props, with default chevron, optional icon-only mode, `items`, `selectedValue`, `onItemSelect`, custom `trigger` / `menuContent`, `triggerAction="click" | "hover"`, `menuPlacement`, `menuOffset`, optional arrow, and Portal targeting. `DropdownList` and `DropdownItem` are exported for lower-level composition.
+- `Dropdown` opens a Floating UI menu-style popover list. It shares Button `variant`, `appearance`, `size`, `loading`, `disabled`, `inverted`, and `fullWidth` props, with default chevron, optional icon-only mode, `items`, `selectedValue`, `onItemSelect`, custom `trigger` / `menuContent`, `triggerAction="click" | "hover"`, `menuPlacement`, `menuOffset`, optional arrow, and Portal targeting. It uses `ListBox` internally for list rendering.
 - `Drawer` is controlled with `open` and `onClose`, supports `placement="right" | "left" | "top" | "bottom"`, `size="sm" | "md" | "lg" | "full"`, overlay close, Escape close, footer actions, Portal targeting, and placement-aware slide animations.
+- `Input` supports `label`, `caption`, `error`, `variant`, `size`, required marker, disabled state, optional leading/trailing icons, `clearable`, `onClear`, and `fullWidth`.
+- `ListBox` and `ListItem` provide reusable selectable list surfaces with shared row spacing, selected state, disabled state, optional leading icons, and `option` / `menuitem` semantics.
+- `Modal` is controlled with `open` and `onClose`, supports `size="sm" | "md" | "lg"`, optional leading header icon, overlay close, Escape close, footer actions, Portal targeting, and centered fade/scale animations.
 - `Portal` renders to `document.body` by default and can target a custom container via `container`, `containerRef`, or `containerId`.
 - `Link` supports `variant`, `size`, `underline="none" | "hover" | "always"`, `inverted`, `disabled`, `truncate`, optional leading/trailing icons, and `external` links.
 - `Popover` is powered by Floating UI, supports `placement`, `align`, `variant`, optional arrow/close controls, controlled or uncontrolled open state, and slot-style body content.
@@ -426,7 +489,10 @@ src/
 | Divider           | `src/components/Divider`           | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground)                          | Stable |
 | Dropdown          | `src/components/Dropdown`          | [Dropdown](https://tanishraj.github.io/ui-kit/?path=/story/components-dropdown--playground)                        | Stable |
 | Drawer            | `src/components/Drawer`            | [Drawer](https://tanishraj.github.io/ui-kit/?path=/story/components-drawer--playground)                            | Stable |
+| Input             | `src/components/Input`             | [Input](https://tanishraj.github.io/ui-kit/?path=/story/components-input--playground)                              | Stable |
+| ListBox           | `src/components/ListBox`           | [ListBox](https://tanishraj.github.io/ui-kit/?path=/story/components-listbox--playground)                          | Stable |
 | Link              | `src/components/Link`              | [Link](https://tanishraj.github.io/ui-kit/?path=/story/components-link--playground)                                | Stable |
+| Modal             | `src/components/Modal`             | [Modal](https://tanishraj.github.io/ui-kit/?path=/story/components-modal--playground)                              | Stable |
 | OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground)      | Stable |
 | Popover           | `src/components/Popover`           | [Popover](https://tanishraj.github.io/ui-kit/?path=/story/components-popover--playground)                          | Stable |
 | Portal            | `src/components/Portal`            | N/A                                                                                                                | Stable |