stp-ui-kit 0.0.104 → 0.0.107

package/README.md

@@ -1,7 +1,23 @@
 # 🎨 stp-ui-kit
 
-A custom UI Kit developed for the Smartestprep platform.  
-It provides a set of reusable, styled, and tested UI components to ensure consistent design and faster development across projects.
+A comprehensive React UI Kit with 50+ production-ready components for the Smartestprep platform.
+Built with TypeScript, Tailwind CSS, and SCSS for consistent design and rapid development.
+
+[![npm version](https://img.shields.io/npm/v/stp-ui-kit.svg)](https://www.npmjs.com/package/stp-ui-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+
+---
+
+## ✨ Features
+
+- 🎨 **50+ Components** - Display, Form, Feedback, Layout, Navigation, Data
+- 🎯 **Design System** - Comprehensive design tokens (spacing, colors, typography)
+- 📱 **Responsive** - Mobile-first with built-in breakpoints
+- 🔧 **TypeScript** - Full type safety with strict mode
+- 🎭 **Theming** - CSS custom properties for easy theming
+- 🚀 **Tree-shakeable** - ES modules for optimal bundle size
+- 📚 **Storybook** - Interactive component documentation
+- 🔥 **Hot Reload** - Watch mode for seamless development with npm link
 
 ---
 
@@ -12,24 +28,66 @@ npm install stp-ui-kit
 # or
 yarn add stp-ui-kit
 # or
-bun add stp-ui-kit
+pnpm add stp-ui-kit
 ```
 
 ---
 
-## 🚀 Usage
-
-Import styles and components directly into your React project:
+## 🚀 Quick Start
 
 ```tsx
-import { Button } from "stp-ui-kit";
-import "stp-ui-kit/dist/styles/index.css";
+// Import styles once in your app entry (main.tsx or App.tsx)
+// Import and use components
+import { Button, Input, Modal, Typography } from "stp-ui-kit";
+import "stp-ui-kit/styles";
 
 export default function App() {
-  return <Button variant='primary'>Click Me</Button>;
+  return (
+    <div>
+      <Typography variant='h1'>Welcome</Typography>
+      <Input
+        label='Email'
+        placeholder='Enter your email'
+      />
+      <Button variant='primary'>Get Started</Button>
+    </div>
+  );
+}
+```
+
+### Using Design Tokens
+
+**In SCSS files:**
+
+```scss
+@use "stp-ui-kit/styles/variables" as stp;
+
+.my-component {
+  padding: stp.$space-400; // 16px
+  border-radius: stp.$border-radius-100; // 4px
+  color: var(--color-neutral-800);
 }
 ```
 
+**In JavaScript/TypeScript:**
+
+```typescript
+import { breakpoints, spacing, typography } from "stp-ui-kit/tokens";
+
+const styles = {
+  padding: spacing["space-400"], // '16px'
+};
+```
+
+---
+
+## 📚 Documentation
+
+- **[COMPONENTS.md](./COMPONENTS.md)** - Complete component reference with all 50+ components
+- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Comprehensive usage guide with examples
+- **[CLAUDE.md](./CLAUDE.md)** - Instructions for AI assistants (Claude Code)
+- **Storybook** - Interactive demos (run `npm run storybook`)
+
 ---
 
 ## 📂 Project Structure
@@ -61,7 +119,6 @@ src/
 - React 18+ / 19+ – core UI framework
 - TypeScript – strongly typed components
 - TailwindCSS 4 + SCSS – styling and design tokens
-- Lucide-react – icon library
 - React Hook Form – form handling integration
 - Storybook 8 – interactive component documentation
 - Vite – development & build tooling
@@ -127,16 +184,30 @@ npm run build-storybook
 - Always run `npm run build` before publishing
 - All changes must be commited into repository
 
-### 🛠 Local Development
+### 🛠 Local Development with Hot Reload
 
-- When developing locally with other projects, use `npm link`
-  ```bash
-  # inside stp-ui-kit
-  npm link
-  # inside your project
-  npm link stp-ui-kit
-  ```
-- After testing locally, publish the updated package if required
+When developing stp-ui-kit and testing in another project:
+
+```bash
+# 1. In stp-ui-kit directory
+npm link
+npm run build:watch  # Keep this running - auto-rebuilds on changes!
+
+# 2. In your project directory
+npm link stp-ui-kit
+npm start
+
+# Changes in stp-ui-kit will now auto-reflect in your project! 🔥
+```
+
+**No need to unlink/relink** - `build:watch` provides hot reload for linked packages.
+
+### 📤 Publishing
+
+- Always run `npm run build` before publishing
+- Update version in `package.json` before `npm publish`
+- Commit all changes to repository
+- Run `npm run format` and `npm run lint` before committing
 
 ## 🤝 Contributing
 

package/dist/components/data/Table/Table.d.ts

@@ -1,17 +1,18 @@
 import { ComponentProps } from 'react';
-import { Table as ShadcnTable, TableBody as ShadcnTableBody, TableCaption as ShadcnTableCaption, TableCell as ShadcnTableCell, TableHead as ShadcnTableHead, TableHeader as ShadcnTableHeader, TableRow as ShadcnTableRow } from '../../ui/table';
-export declare const Table: React.FC<React.ComponentProps<typeof ShadcnTable>>;
-export declare const TableBody: React.FC<React.ComponentProps<typeof ShadcnTableBody>>;
-export declare const TableCaption: React.FC<React.ComponentProps<typeof ShadcnTableCaption>>;
+import * as React from "react";
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+export declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
 type VerticalAlign = "top" | "middle" | "bottom";
-interface CustomTableCellProps extends ComponentProps<typeof ShadcnTableCell> {
-    vAlign?: VerticalAlign;
-}
-export declare const TableCell: React.FC<CustomTableCellProps>;
-export declare const TableHeader: React.FC<React.ComponentProps<typeof ShadcnTableHeader>>;
-interface CustomTableHeadProps extends React.ComponentProps<typeof ShadcnTableHead> {
+interface CustomTableHeadProps extends React.ComponentProps<"th"> {
     variant?: "primary" | "secondary";
 }
 export declare const TableHead: React.FC<CustomTableHeadProps>;
-export declare const TableRow: React.FC<React.ComponentProps<typeof ShadcnTableRow>>;
+interface CustomTableCellProps extends ComponentProps<"td"> {
+    vAlign?: VerticalAlign;
+}
+export declare const TableCell: React.FC<CustomTableCellProps>;
+export declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/display/Chip/Chip.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ReactNode } from 'react';
-export type ChipColor = "blue" | "violet" | "fuchsia" | "lime" | "teal" | "indigo" | "red" | "amber" | "green";
+export type ChipColor = "blue" | "violet" | "fuchsia" | "lime" | "teal" | "indigo" | "red" | "amber" | "green" | "neutral";
 export interface ChipProps {
-    label: string;
+    label: ReactNode;
     icon?: ReactNode;
     color?: ChipColor;
     className?: string;

package/dist/components/display/InputChip/InputChip.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+export interface InputChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    icon?: ReactNode;
+}
+export declare const InputChip: React.FC<InputChipProps>;

package/dist/components/display/OptionList/OptionList.d.ts

@@ -1,6 +1,15 @@
+import { default as React } from 'react';
 export type ShadowLevel = "lower" | "higher";
+export interface OptionProps {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Option: ({ label, icon, onClick, disabled, className, }: OptionProps) => import("react/jsx-runtime").JSX.Element;
 export interface OptionListItem {
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     onClick?: () => void;
     disabled?: boolean;

package/dist/components/display/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList, Option } from './OptionList';
+export type { OptionListProps, OptionListItem, OptionProps, ShadowLevel, } from './OptionList';

package/dist/components/display/index.d.ts

@@ -9,3 +9,4 @@ export * from './Icon/Icon';
 export * from './OptionList/OptionList';
 export * from './Illustration/Illustration';
 export * from './Chip/Chip';
+export * from './InputChip/InputChip';

package/dist/components/feedback/Info/Info.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
     text: ReactNode;
-    tone?: "warning" | "information";
+    tone?: "warning" | "information" | "success";
 }
-export declare const InfoIcons: Record<"warning" | "information", ReactNode>;
+export declare const InfoIcons: Record<"warning" | "information" | "success", ReactNode>;
 export declare const Info: ({ text, tone, className, ...rest }: InfoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/feedback/Modal/Modal.d.ts

@@ -4,7 +4,7 @@ export interface ModalProps {
     activator?: ReactNode;
     open: boolean;
     onClose?: () => void;
-    title: string;
+    title: ReactNode;
     primaryButtonProps?: ButtonProps;
     secondaryButtonProps?: ButtonProps[];
     tone?: "default" | "critical" | "warning";

package/dist/components/feedback/Window/Window.d.ts

@@ -7,7 +7,6 @@ export interface WindowProps {
     title: string;
     primaryButtonProps?: ButtonProps;
     secondaryButtonProps?: ButtonProps[];
-    tone?: "default" | "critical" | "warning";
     children: ReactNode;
     fullHeight?: boolean;
     size?: "sm" | "lg" | "md";

package/dist/components/form/Select/Select.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 interface SelectOption {
-    label: string;
+    label: React.ReactNode;
     value: string | number;
     disabled?: boolean;
 }
 interface SelectProps {
-    label?: string;
+    label?: React.ReactNode;
     error?: string;
     helperText?: string;
     disabled?: boolean;

package/dist/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Plus } from '../../../public/icons/Plus.svg?react';
+export { default as X } from '../../../public/icons/X.svg?react';

package/dist/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './navigation';
 export * from './feedback';
 export * from './display';
 export * from './data';
+export * from './icons';

package/dist/icons/Plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M9.99968 3.41663C10.4139 3.41663 10.7497 3.75241 10.7497 4.16663V9.24963H15.8337C16.2476 9.24981 16.5835 9.5857 16.5837 9.99963C16.5837 10.4137 16.2477 10.7495 15.8337 10.7496H10.7497V15.8336C10.7495 16.2477 10.4138 16.5836 9.99968 16.5836C9.58572 16.5834 9.24986 16.2476 9.24968 15.8336V10.7496H4.16667C3.75246 10.7496 3.41667 10.4138 3.41667 9.99963C3.41687 9.58559 3.75258 9.24963 4.16667 9.24963H9.24968V4.16663C9.24968 3.75252 9.58562 3.4168 9.99968 3.41663Z" fill="currentColor"/>
+</svg>

package/dist/icons/X.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <path d="M10.2197 0.21967C10.5126 -0.0732232 10.9873 -0.0732232 11.2802 0.21967C11.5731 0.512568 11.5731 0.987342 11.2802 1.28022L6.81049 5.74994L11.2802 10.2197C11.5731 10.5126 11.5731 10.9873 11.2802 11.2802C10.9873 11.5731 10.5126 11.5731 10.2197 11.2802L5.74994 6.81049L1.28022 11.2802C0.987342 11.5731 0.512568 11.5731 0.21967 11.2802C-0.0732232 10.9873 -0.0732232 10.5126 0.21967 10.2197L4.6894 5.74994L0.21967 1.28022C-0.0732233 0.987324 -0.0732233 0.512563 0.21967 0.21967C0.512563 -0.0732233 0.987324 -0.0732233 1.28022 0.21967L5.74994 4.6894L10.2197 0.21967Z" fill="currentColor"/>
+</svg>