@lazar-ui/kit 0.1.0

package/README.md

@@ -0,0 +1,182 @@
+# @lazar-ui/kit
+
+A component library for building admin panels, dashboards, and internal tools.
+Focuses on practical UI patterns commonly needed in B2B applications:
+data-heavy layouts, modals, menus, forms, and navigation.
+
+## Features
+
+**28+ production-ready components** — from buttons and tables to compound menus
+and slot-based dialogs. Every component is designed for the admin panel context:
+Actionable tables, pagination, filterable selects, and more.
+
+**4 component patterns** to cover different composition needs:
+
+- **Simple** — Button, Badge, Card, Table, Pagination, etc.
+- **Compound** — Accordion, Menu, Popover, Tabs
+- **Slot-based** — Dialog, Drawer (Title / Content / Actions)
+- **Context-based** — ConfigProvider, Breadcrumbs, Tabs
+
+**Tree-shakeable by default.** Each component is a separate subpath export.
+Import exactly what you need, nothing more:
+
+```tsx
+import { Button } from '@lazar-ui/kit/button';
+```
+
+Only `@lazar-ui/kit/button` ends up in your bundle — not the entire library.
+
+**Isolated CSS.** Styles are injected per-component at build time.
+No global CSS, no style conflicts, no unused rules.
+
+**Light and dark themes** via `data-theme` and CSS custom properties.
+Wrap your app in `ConfigProvider` and toggle with a single attribute.
+
+**Custom color palettes.** Two palettes included (monochrome, indigo).
+Replace them with your own: copy a palette file, override the `--palette-*`
+variables, and import it instead.
+
+**Localization ready.** Interface ships with `en` and `ru` locales.
+Add any language through `ILocaleMessages` module augmentation
+— no forks, no patches, just type-safe extension.
+
+**Accessible by default.** Built on `react-aria` and `react-stately`.
+Keyboard navigation, screen reader support, focus management
+— all handled at the component level.
+
+**Fully typed.** TypeScript strict mode. Every component exports `IProps`.
+Every import is typed. No undocumented props, no surprise `any`.
+
+**Typed SCSS Modules.** All styles are typed via `typed-scss-modules`.
+Import styles with full type safety — class name typos are caught at build time.
+
+**Vite-powered build.** ES output with automatic declaration generation (`dts`)
+and CSS injection. No bundler lock-in — works with any Vite/Next/Rspack setup.
+
+## Installation
+
+```bash
+npm install @lazar-ui/kit
+```
+
+### Peer dependencies
+
+| Package         | Version  |
+| --------------- | -------- |
+| `react`         | ^19.2.0  |
+| `react-dom`     | ^19.2.0  |
+| `react-aria`    | ^3.44.0  |
+| `react-stately` | ^3.42.0  |
+| `clsx`          | ^2.1.1   |
+| `lodash`        | ^4.17.21 |
+
+## Quick start
+
+```tsx
+import { ConfigProvider } from '@lazar-ui/kit';
+import '@lazar-ui/kit/css/palettes/monochrome.css';
+import '@lazar-ui/kit/css/semantic.css';
+
+function App() {
+  return (
+    <ConfigProvider theme="light" locale="en">
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+Then use any component:
+
+```tsx
+import { Button } from '@lazar-ui/kit/button';
+import { Table } from '@lazar-ui/kit/table';
+
+function UsersPage() {
+  return <Button onClick={() => console.log('clicked')}>Add User</Button>;
+}
+```
+
+## Component list
+
+| Component      | Pattern       | Description                   |
+| -------------- | ------------- | ----------------------------- |
+| Accordion      | Compound      | Collapsible sections          |
+| Alert          | Simple        | Inline notifications          |
+| Avatar         | Simple        | User avatar with fallback     |
+| Badge          | Simple        | Status / count indicator      |
+| Breadcrumbs    | Context-based | Navigation trail              |
+| Button         | Simple        | Action trigger                |
+| Card           | Simple        | Content container             |
+| Checkbox       | Simple        | Binary input                  |
+| ConfigProvider | Context-based | Theme + locale provider       |
+| Dialog         | Slot-based    | Modal dialog                  |
+| Drawer         | Slot-based    | Side panel                    |
+| EmptyState     | Simple        | Empty / no-data state         |
+| ErrorBoundary  | Simple        | React error boundary          |
+| Flex           | Simple        | Flexbox layout helper         |
+| FormField      | Simple        | Field wrapper (label + error) |
+| Input          | Simple        | Text input variants           |
+| Menu           | Compound      | Dropdown menu                 |
+| Pagination     | Simple        | Page navigation               |
+| Popover        | Compound      | Floating panel                |
+| Select         | Simple        | Dropdown selector             |
+| Separator      | Simple        | Visual divider                |
+| Skeleton       | Simple        | Loading placeholder           |
+| Spinner        | Simple        | Loading indicator             |
+| Switch         | Simple        | Toggle control                |
+| Table          | Simple        | Data table                    |
+| Tabs           | Compound      | Tabbed navigation             |
+| Textarea       | Simple        | Multi-line input              |
+| Tooltip        | Simple        | Hover hint                    |
+
+## Theming
+
+Wrap your app with `ConfigProvider` and pass a `theme` prop:
+
+```tsx
+<ConfigProvider theme="dark" locale="en">
+  <YourApp />
+</ConfigProvider>
+```
+
+Available themes: `light`, `dark`.
+
+To create a custom palette, copy one of the bundled palettes
+from `node_modules/@lazar-ui/kit/css/palettes/`, adjust the
+`--palette-*` variables, and import your file before `semantic.css`.
+
+## Localization
+
+Pass a locale to `ConfigProvider`. Built-in: `en`, `ru`.
+
+```tsx
+<ConfigProvider locale="ru">
+  <YourApp />
+</ConfigProvider>
+```
+
+Add a new language by augmenting `ILocaleMessages`:
+
+```tsx
+declare module '@lazar-ui/kit' {
+  interface ILocaleMessages {
+    myCustomSection: {
+      greeting: string;
+    };
+  }
+}
+```
+
+Then pass your locale object:
+
+```tsx
+<ConfigProvider locale={{ myCustomSection: { greeting: 'Hello' } }}>
+  <YourApp />
+</ConfigProvider>
+```
+
+## Contacts
+
+Telegram: [@vasiliylazarev](https://t.me/vasiliylazarev)  
+Email: [vasiliylazarev@gmail.com](mailto:vasiliylazarev@gmail.com)