@lazar-ui/kit 0.2.0 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [0.2.3] - 2026-06-01
+
+### Bug Fixes
+
+- **Button**: fix icon alignment inside button (flex layout)
+- **Input**: fix input base background color
+
+### Documentation
+
+- **README**: fix license badge link to point to npmjs
+
+### Chores
+
+- **package.json**: fix repository URL, add LICENSE to files
+- **CI**: switch from NPM_TOKEN to Trusted Publisher (OIDC)
+
+## [0.2.2] - 2026-06-01
+
+### Bug Fixes
+
+- **Button**: fix icon alignment inside button (flex layout)
+- **Input**: fix input base background color
+
+## [0.2.1] - 2026-06-01
+
+### Documentation
+
+- **package.json**: add homepage, repository, and bugs fields for npm display
+
 ## [0.2.0] - 2026-05-27
 
 ### Features

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vasiliy Lazarev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,21 +1,26 @@
 # @lazar-ui/kit
 
+[![npm version](https://img.shields.io/npm/v/@lazar-ui/kit)](https://www.npmjs.com/package/@lazar-ui/kit)
+[![npm license](https://img.shields.io/npm/l/@lazar-ui/kit)](https://www.npmjs.com/package/@lazar-ui/kit)
+[![Storybook](https://img.shields.io/badge/docs-storybook-44403c)](https://lazar-ui.github.io/docs)
+
 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
+**30 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:
+**5 component patterns** to cover different composition needs:
 
-- **Simple** — Button, Badge, Card, Table, Pagination, etc.
+- **Simple** — Button, Badge, Card, Table, Pagination, Typography, etc.
 - **Compound** — Accordion, Menu, Popover, Tabs
-- **Slot-based** — Dialog, Drawer (Title / Content / Actions)
-- **Context-based** — ConfigProvider, Breadcrumbs, Tabs
+- **Slot-based** — Dialog, Drawer, EmptyState (Title / Content / Actions)
+- **Input-variations** — Input (Email, Password, Phone, Number via Object.assign)
+- **Context-based** — LazarUiProvider, Breadcrumbs, Tabs
 
 **Tree-shakeable by default.** Each component is a separate subpath export.
 Import exactly what you need, nothing more:
@@ -30,10 +35,10 @@ Only `@lazar-ui/kit/button` ends up in your bundle — not the entire library.
 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.
+Wrap your app in `LazarUiProvider` 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-*`
+Replace them with your own: copy a palette file, override the `--lui-palette-*`
 variables, and import it instead.
 
 **Localization ready.** Interface ships with `en` and `ru` locales.
@@ -53,6 +58,10 @@ Import styles with full type safety — class name typos are caught at build tim
 **Vite-powered build.** ES output with automatic declaration generation (`dts`)
 and CSS injection. No bundler lock-in — works with any Vite/Next/Rspack setup.
 
+---
+
+📖 [**Storybook docs**](https://lazar-ui.github.io/docs) — browse all components live
+
 ## Installation
 
 ```bash
@@ -73,15 +82,15 @@ npm install @lazar-ui/kit
 ## Quick start
 
 ```tsx
-import { ConfigProvider } from '@lazar-ui/kit';
+import { LazarUiProvider } from '@lazar-ui/kit/lazar-ui-provider';
 import '@lazar-ui/kit/css/palettes/monochrome.css';
 import '@lazar-ui/kit/css/semantic.css';
 
 function App() {
   return (
-    <ConfigProvider theme="light" locale="en">
+    <LazarUiProvider theme="light" locale="en">
       <YourApp />
-    </ConfigProvider>
+    </LazarUiProvider>
   );
 }
 ```
@@ -97,6 +106,36 @@ function UsersPage() {
 }
 ```
 
+## Fonts
+
+The kit uses **Inter** by default via `--lui-font-family-body`. The font is **not bundled** — you choose how to load it.
+
+**Option A: Google Fonts CDN** (add to `<head>`)
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet" />
+```
+
+**Option B: npm** (`@fontsource/inter`)
+
+```bash
+npm install @fontsource/inter
+```
+
+```tsx
+import '@fontsource/inter';
+```
+
+**Custom font** — override the token:
+
+```css
+:root {
+  --lui-font-family-body: "Roboto", system-ui, sans-serif;
+}
+```
+
 ## Component list
 
 | Component      | Pattern       | Description                   |
@@ -109,14 +148,15 @@ function UsersPage() {
 | Button         | Simple        | Action trigger                |
 | Card           | Simple        | Content container             |
 | Checkbox       | Simple        | Binary input                  |
-| ConfigProvider | Context-based | Theme + locale provider       |
+| LazarUiProvider | Context-based | Theme + locale provider       |
 | Dialog         | Slot-based    | Modal dialog                  |
 | Drawer         | Slot-based    | Side panel                    |
-| EmptyState     | Simple        | Empty / no-data state         |
+| EmptyState     | Slot-based    | 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           |
+| Icon           | Simple        | Lucide icon wrapper           |
+| Input          | Input-variations | Text input variants (Email, Password, Phone, Number) |
 | Menu           | Compound      | Dropdown menu                 |
 | Pagination     | Simple        | Page navigation               |
 | Popover        | Compound      | Floating panel                |
@@ -129,37 +169,38 @@ function UsersPage() {
 | Tabs           | Compound      | Tabbed navigation             |
 | Textarea       | Simple        | Multi-line input              |
 | Tooltip        | Simple        | Hover hint                    |
+| Typography     | Simple        | Typography variant compositor |
 
 ## Theming
 
-Wrap your app with `ConfigProvider` and pass a `theme` prop:
+Wrap your app with `LazarUiProvider` and pass a `theme` prop:
 
 ```tsx
-<ConfigProvider theme="dark" locale="en">
+<LazarUiProvider theme="dark" locale="en">
   <YourApp />
-</ConfigProvider>
+</LazarUiProvider>
 ```
 
 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`.
+`--lui-palette-*` variables, and import your file before `semantic.css`.
 
 ## Localization
 
-Pass a locale to `ConfigProvider`. Built-in: `en`, `ru`.
+Pass a locale to `LazarUiProvider`. Built-in: `en`, `ru`.
 
 ```tsx
-<ConfigProvider locale="ru">
+<LazarUiProvider locale="ru">
   <YourApp />
-</ConfigProvider>
+</LazarUiProvider>
 ```
 
 Add a new language by augmenting `ILocaleMessages`:
 
 ```tsx
-declare module '@lazar-ui/kit' {
+declare module '@lazar-ui/kit/lazar-ui-provider' {
   interface ILocaleMessages {
     myCustomSection: {
       greeting: string;
@@ -171,9 +212,9 @@ declare module '@lazar-ui/kit' {
 Then pass your locale object:
 
 ```tsx
-<ConfigProvider locale={{ myCustomSection: { greeting: 'Hello' } }}>
+<LazarUiProvider locale={{ myCustomSection: { greeting: 'Hello' } }}>
   <YourApp />
-</ConfigProvider>
+</LazarUiProvider>
 ```
 
 ## Contacts