@tanishraj/ui-kit 2.2.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanishraj/ui-kit",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
   "author": "Tanishraj",
   "license": "MIT",
@@ -75,6 +75,7 @@
     "lucide-react": "^1.17.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {

package/readme.md

@@ -75,10 +75,23 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Feedback,
+  Input,
+  ListBox,
   Link,
+  Modal,
   OrganizationChart,
   Popover,
+  ProgressBar,
   Portal,
+  Radio,
+  RadioGroup,
+  Rating,
+  Slider,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
 } from '@tanishraj/ui-kit';
 
 export function Demo() {
@@ -110,14 +123,28 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Feedback,
+  Input,
+  ListBox,
   Link,
+  Modal,
   Popover,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Rating,
+  Slider,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
 } from '@tanishraj/ui-kit';
 import { Plus } from 'lucide-react';
 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 +155,48 @@ 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'
+      />
+      <Radio defaultChecked label='Radio' />
+      <RadioGroup
+        defaultValue='email'
+        label='Notification method'
+        options={[
+          { label: 'Email', value: 'email' },
+          { label: 'SMS', value: 'sms' },
+        ]}
+      />
+      <Feedback defaultValue={4} />
+      <Rating defaultValue={3.5} precision={0.5} />
+      <Slider label='Slider Label' max={10} value={5} />
+      <Tabs defaultValue={0}>
+        <TabsList>
+          <Tab>Overview</Tab>
+          <Tab>Details</Tab>
+        </TabsList>
+        <TabPanel>Overview content</TabPanel>
+        <TabPanel>Details content</TabPanel>
+      </Tabs>
+      <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'
@@ -136,6 +204,12 @@ export default function Demo() {
       >
         Slot Area
       </Popover>
+      <ProgressBar
+        caption='There will be a caption text here'
+        label='Label'
+        value={30}
+        variant='primary'
+      />
       <Drawer
         footer={<Button onClick={() => setDrawerOpen(false)}>Close</Button>}
         onClose={() => setDrawerOpen(false)}
@@ -217,8 +291,21 @@ import {
   Divider,
   Dropdown,
   Drawer,
+  Feedback,
+  Input,
+  ListBox,
   Link,
+  Modal,
   Popover,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Rating,
+  Slider,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
 } from '@tanishraj/ui-kit';
 import { Home, Plus, Tag } from 'lucide-react';
 
@@ -259,6 +346,30 @@ export function ComponentExamples() {
         shape='square'
       />
 
+      <Radio defaultChecked label='Radio option' />
+
+      <RadioGroup
+        defaultValue='email'
+        label='Notification method'
+        options={[
+          { label: 'Email', value: 'email' },
+          { label: 'SMS', value: 'sms' },
+        ]}
+        orientation='horizontal'
+      />
+
+      <Feedback defaultValue={4} />
+      <Rating defaultValue={3.5} precision={0.5} />
+      <Slider label='Slider Label' max={10} value={5} />
+      <Tabs defaultValue={0}>
+        <TabsList>
+          <Tab>Overview</Tab>
+          <Tab>Details</Tab>
+        </TabsList>
+        <TabPanel>Overview content</TabPanel>
+        <TabPanel>Details content</TabPanel>
+      </Tabs>
+
       <Divider>
         <Button leadingIcon={Plus} size='sm' variant='default'>
           Add item
@@ -269,6 +380,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'
@@ -278,6 +418,14 @@ export function ComponentExamples() {
         Slot Area
       </Popover>
 
+      <ProgressBar
+        caption='There will be a caption text here'
+        label='Label'
+        showDot
+        value={30}
+        variant='success'
+      />
+
       <AnimatePresence presence>
         <AnimatePresenceChild>
           <div className='animate-in slide-in-from-right duration-500'>
@@ -297,11 +445,21 @@ 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.
+- `Feedback` supports controlled or uncontrolled five-point sentiment selection with `value`, `defaultValue`, `onValueChange`, `options`, `variant="face" | "emoji"`, `size`, read-only state, disabled state, and custom accessible labels via `getLabelText`.
+- `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.
+- `ProgressBar` supports `appearance="linear" | "circular"`, semantic `variant`, `size`, labels, captions, visible values, optional linear endpoint dots, custom value formatting, `fullWidth`, and inverted dark-surface styling.
+- `Radio` supports `label`, `description`, `error`, `size`, required marker, disabled state, and native radio input props for single-option composition.
+- `RadioGroup` supports controlled or uncontrolled single selection with `value`, `defaultValue`, `onValueChange`, options, group label, description, error text, `orientation`, `size`, disabled state, and required marker.
+- `Rating` supports controlled or uncontrolled star ratings with `value`, `defaultValue`, `onValueChange`, `max`, `precision={1 | 0.5}`, `size`, read-only state, disabled state, and custom accessible labels.
+- `Slider` supports controlled or uncontrolled single or range selection with `value`, `defaultValue`, `onValueChange`, `min`, `max`, `step`, size variants, visible value markers, labels, captions, and error/disabled states.
+- `Tabs`, `TabsList`, `Tab`, and `TabPanel` provide a compound tabs API with controlled or uncontrolled selection, `variant="underline" | "pill"`, `size`, `orientation`, disabled states, optional adornments, status dots, and close actions.
 
 ### Documentation and examples
 
@@ -426,10 +584,20 @@ 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 |
+| Feedback          | `src/components/Feedback`          | [Feedback](https://tanishraj.github.io/ui-kit/?path=/story/components-feedback--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 |
+| ProgressBar       | `src/components/ProgressBar`       | [ProgressBar](https://tanishraj.github.io/ui-kit/?path=/story/components-progressbar--playground)                  | Stable |
 | Portal            | `src/components/Portal`            | N/A                                                                                                                | Stable |
+| Radio             | `src/components/Radio`             | [Radio](https://tanishraj.github.io/ui-kit/?path=/story/components-radio--playground)                              | Stable |
+| RadioGroup        | `src/components/RadioGroup`        | [RadioGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-radiogroup--playground)                    | Stable |
+| Rating            | `src/components/Rating`            | [Rating](https://tanishraj.github.io/ui-kit/?path=/story/components-rating--playground)                            | Stable |
+| Slider            | `src/components/Slider`            | [Slider](https://tanishraj.github.io/ui-kit/?path=/story/components-slider--playground)                            | Stable |
+| Tabs              | `src/components/Tabs`              | [Tabs](https://tanishraj.github.io/ui-kit/?path=/story/components-tabs--playground)                                | Stable |
 
 ## Versioning and Changelog