@tanishraj/ui-kit 1.1.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanishraj/ui-kit",
-  "version": "1.1.0",
+  "version": "2.0.1",
   "description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
   "author": "Tanishraj",
   "license": "MIT",
@@ -27,10 +27,10 @@
       "require": "./dist/globals.css",
       "default": "./dist/globals.css"
     },
-    "./theme-primary.css": {
-      "import": "./dist/themes/primary.css",
-      "require": "./dist/themes/primary.css",
-      "default": "./dist/themes/primary.css"
+    "./base.css": {
+      "import": "./dist/colors/base.css",
+      "require": "./dist/colors/base.css",
+      "default": "./dist/colors/base.css"
     },
     "./theme-secondary.css": {
       "import": "./dist/themes/secondary.css",
@@ -51,7 +51,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && vite build && npm run copy:theme && rm -rf dist/src",
-    "copy:theme": "mkdir -p dist/themes && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css && cp src/styles/globals.css dist/globals.css",
+    "copy:theme": "mkdir -p dist/themes dist/colors && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css && perl -pe \"s#(\\@import '../themes/primary\\.css';)#\\@import './themes/primary.css';#\" src/styles/globals.css > dist/globals.css && cp src/styles/colors/base.css dist/colors/base.css",
     "prepublishOnly": "npm run build",
     "test": "vitest",
     "test:watch": "vitest --watch",

package/readme.md

@@ -61,12 +61,15 @@ import {
   Badge,
   Avatar,
   AvatarGroup,
+  Breadcrumb,
+  Checkbox,
+  CheckboxGroup,
+  Chip,
+  Divider,
 } from '@tanishraj/ui-kit';
-import '@tanishraj/ui-kit/globals.css';
-import '@tanishraj/ui-kit/theme-primary.css';
 
 export function Demo() {
-  return <Button variant="primary">Get Started</Button>;
+  return <Button variant='primary'>Get Started</Button>;
 }
 ```
 
@@ -80,25 +83,25 @@ The library is built to be consumed like a standard React UI package:
 npm install @tanishraj/ui-kit
 ```
 
-2. Import global styles once (usually near your app entry):
+2. Use components (styles are included automatically on package import):
 
-```ts
-import '@tanishraj/ui-kit/globals.css';
-import '@tanishraj/ui-kit/theme-primary.css'; // or theme-secondary.css
-```
-
-3. Use component APIs directly from the package.
+Use component APIs directly from the package.
 
 ```tsx
-import { Button, Avatar } from '@tanishraj/ui-kit';
+import { Avatar, Button, Chip, Divider } from '@tanishraj/ui-kit';
+import { Plus } from 'lucide-react';
 
 export default function Demo() {
   return (
-    <div className="flex items-center gap-4">
-      <Button variant="primary" size="md">
+    <div className='flex items-center gap-4'>
+      <Button variant='primary' size='md'>
         Primary Button
       </Button>
-      <Avatar initials="AB" name="Amit B." variant="primary" />
+      <Avatar initials='AB' variant='primary' />
+      <Chip icon={Plus} variant='success'>
+        Active
+      </Chip>
+      <Divider className='w-32' />
     </div>
   );
 }
@@ -107,15 +110,23 @@ export default function Demo() {
 ### Theme file options
 
 ```ts
-import '@tanishraj/ui-kit/theme-primary.css';
-// Optional: use another packaged theme
+// Optional: import this only when you want secondary theme
 import '@tanishraj/ui-kit/theme-secondary.css';
 ```
 
+### Adding new themes (for maintainers)
+
+To add a new packaged theme later:
+
+1. Add `src/themes/<theme-name>.css`.
+2. Add a package export in `package.json`:
+   - `./theme-<theme-name>.css` -> `./dist/themes/<theme-name>.css`
+3. Update the `copy:theme` script to include the new file.
+4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
+
 You can also import through:
 
 ```ts
-import '@tanishraj/ui-kit/themes/primary.css';
 import '@tanishraj/ui-kit/themes/secondary.css';
 ```
 
@@ -127,10 +138,67 @@ If your app uses a custom design token strategy, import one packaged theme and o
 - Props follow consistent naming patterns:
   - `size` (`sm`, `md`, `lg`)
   - `variant` (status/visual intent)
+  - `appearance` (container treatment such as `filled`, `outline`, `ghost`, or `dashed`, depending on component)
   - `shape` (`circle`, `square` where supported)
+  - `inverted` for alternate surface color modes where supported
   - `disabled`, `loading`, and interaction states where applicable
 - Component stories in `*.stories.tsx` are the source of truth for public usage patterns and prop combinations.
 
+### Common Examples
+
+```tsx
+import {
+  Breadcrumb,
+  Button,
+  CheckboxGroup,
+  Chip,
+  Divider,
+} from '@tanishraj/ui-kit';
+import { Home, Plus, Tag } from 'lucide-react';
+
+export function ComponentExamples() {
+  return (
+    <div className='flex flex-col gap-6'>
+      <Breadcrumb
+        appearance='outline'
+        items={[
+          { label: 'Home', href: '/', icon: Home },
+          { label: 'Components', href: '/components' },
+          { label: 'Chip' },
+        ]}
+        separator='>'
+      />
+
+      <Chip appearance='filled' icon={Tag} shape='circle' variant='primary'>
+        Filter
+      </Chip>
+
+      <CheckboxGroup
+        label='Notification channels'
+        options={[
+          { label: 'Email', value: 'email' },
+          { label: 'SMS', value: 'sms' },
+        ]}
+        shape='square'
+      />
+
+      <Divider>
+        <Button leadingIcon={Plus} size='sm' variant='default'>
+          Add item
+        </Button>
+      </Divider>
+    </div>
+  );
+}
+```
+
+### Component Notes
+
+- `Breadcrumb` supports `appearance="ghost" | "outline"` and `separator=">" | "/"`. The chevron separator is rendered as an icon.
+- `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`.
+
 ### Documentation and examples
 
 - Storybook: run locally with `npm run storybook`
@@ -140,7 +208,6 @@ If your app uses a custom design token strategy, import one packaged theme and o
 
 - Component style variants are centralized with CVA + Tailwind utility patterns.
 - Theme tokens are built in and theme files are exported from package entry points:
-  - `theme-primary.css`
   - `theme-secondary.css`
   - `globals.css`
 
@@ -235,14 +302,20 @@ src/
 
 ## Components
 
-| Component | Location | Storybook | Status |
-| --- | --- | --- | --- |
-| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default) | Stable |
-| Badge | `src/components/Badge` | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground) | Stable |
-| Avatar | `src/components/Avatar` | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground) | Stable |
-| AvatarGroup | `src/components/AvatarGroup` | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default) | Stable |
-| Button | `src/components/Button` | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground) | Stable |
-| ButtonGroup | `src/components/ButtonGroup` | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground) | Stable |
+| Component         | Location                           | Storybook                                                                                                     | Status |
+| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------ |
+| Accordion         | `src/components/Accordion`         | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default)                    | Stable |
+| Alert             | `src/components/Alert`             | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default)                            | Stable |
+| Avatar            | `src/components/Avatar`            | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground)                       | Stable |
+| AvatarGroup       | `src/components/AvatarGroup`       | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default)                | Stable |
+| Badge             | `src/components/Badge`             | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground)                         | Stable |
+| Breadcrumb        | `src/components/Breadcrumb`        | [Breadcrumb](https://tanishraj.github.io/ui-kit/?path=/story/components-breadcrumb--playground)               | Stable |
+| Button            | `src/components/Button`            | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground)                       | Stable |
+| ButtonGroup       | `src/components/ButtonGroup`       | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground)             | Stable |
+| Checkbox          | `src/components/Checkbox`          | [Checkbox](https://tanishraj.github.io/ui-kit/?path=/story/components-checkbox--playground)                   | Stable |
+| CheckboxGroup     | `src/components/CheckboxGroup`     | [CheckboxGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-checkboxgroup--playground)         | Stable |
+| Chip              | `src/components/Chip`              | [Chip](https://tanishraj.github.io/ui-kit/?path=/story/components-chip--playground)                           | Stable |
+| Divider           | `src/components/Divider`           | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground)                     | Stable |
 | OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground) | Stable |
 
 ## Versioning and Changelog