@lazar-ui/kit 0.1.0 → 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,83 @@
+# Changelog
+
+## [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
+
+- **ConfigProvider**: add ConfigProvider and palettes ([4a1d0d0](https://github.com/anomalyco/lazar-ui/commit/4a1d0d0))
+- **Badge**: add Badge component ([ce0ffc7](https://github.com/anomalyco/lazar-ui/commit/ce0ffc7))
+- **Popover**: add Popover component ([68a2c06](https://github.com/anomalyco/lazar-ui/commit/68a2c06))
+- **Popover.Content**: add padding prop ([712142b](https://github.com/anomalyco/lazar-ui/commit/712142b))
+- **Tooltip**: add Tooltip component ([d937823](https://github.com/anomalyco/lazar-ui/commit/d937823))
+- **Input**: add Input components ([6bf346a](https://github.com/anomalyco/lazar-ui/commit/6bf346a))
+- **Avatar**: add Avatar component ([76c523f](https://github.com/anomalyco/lazar-ui/commit/76c523f))
+- **Separator**: add Separator component ([8e395f6](https://github.com/anomalyco/lazar-ui/commit/8e395f6))
+- **Card**: add Card component ([bfe36cf](https://github.com/anomalyco/lazar-ui/commit/bfe36cf))
+- **Skeleton**: add Skeleton component ([d1980e0](https://github.com/anomalyco/lazar-ui/commit/d1980e0))
+- **Alert**: add Alert component ([85217f3](https://github.com/anomalyco/lazar-ui/commit/85217f3))
+- **EmptyState**: add EmptyState component ([0c8a81c](https://github.com/anomalyco/lazar-ui/commit/0c8a81c))
+- **FormField**: add FormField component ([c5e87a2](https://github.com/anomalyco/lazar-ui/commit/c5e87a2))
+- **Spinner**: add Spinner component ([9e5bafc](https://github.com/anomalyco/lazar-ui/commit/9e5bafc))
+- **Checkbox**: add Checkbox component ([1272021](https://github.com/anomalyco/lazar-ui/commit/1272021))
+- **Select**: add Select component ([1378e1a](https://github.com/anomalyco/lazar-ui/commit/1378e1a))
+- **Switch**: add Switch component ([a581b19](https://github.com/anomalyco/lazar-ui/commit/a581b19))
+- **Textarea**: add Textarea component ([2cf5daf](https://github.com/anomalyco/lazar-ui/commit/2cf5daf))
+- **Pagination**: add Pagination component ([61212a4](https://github.com/anomalyco/lazar-ui/commit/61212a4))
+- **Menu**: add Menu component ([6ca3761](https://github.com/anomalyco/lazar-ui/commit/6ca3761))
+- **Flex**: add Flex component ([6ec9525](https://github.com/anomalyco/lazar-ui/commit/6ec9525))
+- **ErrorBoundary**: add ErrorBoundary component ([242e48f](https://github.com/anomalyco/lazar-ui/commit/242e48f))
+- **Breadcrumbs**: add Breadcrumbs component ([b9b1875](https://github.com/anomalyco/lazar-ui/commit/b9b1875))
+- **Drawer**: add Drawer component ([e7f2a90](https://github.com/anomalyco/lazar-ui/commit/e7f2a90))
+- **Drawer**: add Actions slot ([7f3d103](https://github.com/anomalyco/lazar-ui/commit/7f3d103))
+- **Dialog**: add Dialog component ([9e3acf3](https://github.com/anomalyco/lazar-ui/commit/9e3acf3))
+- **Table**: add Table component ([8c1b287](https://github.com/anomalyco/lazar-ui/commit/8c1b287))
+- **vitest-config**: add vitest-config package ([1cfb90a](https://github.com/anomalyco/lazar-ui/commit/1cfb90a))
+- **storybook**: setup Storybook and linters ([ef8c246](https://github.com/anomalyco/lazar-ui/commit/ef8c246))
+- **styles**: fix global styles setup ([692fc7c](https://github.com/anomalyco/lazar-ui/commit/692fc7c))
+
+### Bug Fixes
+
+- **Badge**: update heights ([53d104b](https://github.com/anomalyco/lazar-ui/commit/53d104b))
+- **Table**: update Table component ([94c0d8c](https://github.com/anomalyco/lazar-ui/commit/94c0d8c))
+- **storybook**: update stories ([b7e6add](https://github.com/anomalyco/lazar-ui/commit/b7e6add))
+- **css**: update tokens ([c80a00b](https://github.com/anomalyco/lazar-ui/commit/c80a00b))
+- **Dialog**: update styles ([21bf726](https://github.com/anomalyco/lazar-ui/commit/21bf726))
+- **EmptyState**: rename slot Action to Actions ([419eb59](https://github.com/anomalyco/lazar-ui/commit/419eb59))
+- **Popover**: fix first render position ([798c1b6](https://github.com/anomalyco/lazar-ui/commit/798c1b6))
+- **Popover/Tooltip**: fix access to overlays inside overlay (html invert attr problem) ([bee4472](https://github.com/anomalyco/lazar-ui/commit/bee4472))
+- **Popover/Tooltip**: fix incorrect first render position ([93e17af](https://github.com/anomalyco/lazar-ui/commit/93e17af))
+
+### Documentation
+
+- **Popover/Tooltip**: correct placements ([ab05441](https://github.com/anomalyco/lazar-ui/commit/ab05441))
+- **kit**: add README.md and set version to 0.1.0 ([d00235d](https://github.com/anomalyco/lazar-ui/commit/d00235d))
+
+### Refactor
+
+- rename @repo/ui → @lazar-ui/kit and @repo/builder → @lazar-ui/admin ([ff79f0c](https://github.com/anomalyco/lazar-ui/commit/ff79f0c))
+
+### Styles
+
+- fix react import paths ([db8ad4b](https://github.com/anomalyco/lazar-ui/commit/db8ad4b))
+
+### Tests
+
+- add test coverage page to storybook ([86d1d4d](https://github.com/anomalyco/lazar-ui/commit/86d1d4d))
+
+### Chores
+
+- update package.json ([2dfa0b1](https://github.com/anomalyco/lazar-ui/commit/2dfa0b1))
+- fix lint and typecheck errors for release ([81a6b5b](https://github.com/anomalyco/lazar-ui/commit/81a6b5b))

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://github.com/lazar-ui/lazar-ui/blob/main/packages/kit/LICENSE)
+[![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