@andreyfedkovich/cozy-ui 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -1,6 +1,45 @@
 # Changelog
 
-## 0.2.1
+Формат основан на [Keep a Changelog](https://keepachangelog.com/).
+Версии соответствуют [Semantic Versioning](https://semver.org/) и git-тегам `v*`.
+
+## 0.6.0 - 2026-05-21
+
+- **feat:** `SideNav` — vertical navigation with `classic` and `aurora` variants, optional collapse, declarative `sections`, composition API (`SideNav.Section`, `SideNav.Item`, `SideNav.Divider`, `SideNav.Custom`), user block, and nested submenu items.
+- **feat:** `Textarea` — multiline field with `label`, `error`, `hint` / `hintVariant`, optional label tooltip (`tooltipContent`), and `forwardRef`.
+
+## 0.5.2 - 2026-05-20
+
+- **fix:** Published `styles.css` now includes Tailwind utilities and design tokens used by `Calendar` and other `src/components/ui` primitives. Consumers only need `import "@andreyfedkovich/cozy-ui/styles.css"` — Tailwind in the host app is not required.
+- **build:** `build:lib` runs `@tailwindcss/cli` on `src/lib/tailwind.css` and merges output with SCSS module CSS.
+
+## 0.5.1 - 2026-05-20
+
+- Republish of 0.5.0 (no code changes).
+
+## 0.5.0 - 2026-05-20
+
+- **feat:** `Calendar` date picker for forms (`yyyy-MM-dd` value, localized display).
+- **feat:** `Label` and field labels for form components.
+- **feat:** `Checkbox` with label, error state, and tooltip on the label.
+
+## 0.4.0 - 2026-05-19
+
+- **feat:** `CommentFeed` — workflow comment thread with composer and list layout.
+
+## 0.3.0 - 2026-05-18
+
+- **feat:** `DetailView` — composition-first detail page layout (`DetailView.Header`, `.Section`, `.Field`, etc.).
+
+## 0.2.3 - 2026-05-14
+
+- **feat:** `TreeDialogSelect` — optional confirm-only-leaf mode for tree selection.
+
+## 0.2.2 - 2026-05-07
+
+- **feat:** `TabsRounded` — rounded tab panels variant.
+
+## 0.2.1 - 2026-05-06
 
 - **fix:** Published `dist-lib/index.d.ts` is now the real rolled-up declaration bundle (no broken stub pointing at `../dist/lib/index`). `vite-plugin-dts` writes types to the same `outDir` as the library build (`dist-lib`).
 - **fix:** Ship `dist-lib/svg-react-shim.d.ts` and a `/// <reference />` in `index.d.ts` so consumers typecheck `*.svg?react` imports from the bundle without missing-module errors (including with `skipLibCheck: false`).

package/README.md

@@ -31,11 +31,11 @@ npm i @andreyfedkovich/cozy-ui
 - [Design tokens](#design-tokens)
 - [Component API](#component-api)
   - [Layout & content](#layout--content) — `BaseBlock`, `Card`, `CollapsableBlock`, `Collapse`, `Carousel`, `EmptyComponent`, `Spinner`
-  - [Inputs & forms](#inputs--forms) — `Button`, `RadioGroupButton`, `Input`, `Calendar`, `Checkbox`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
+  - [Inputs & forms](#inputs--forms) — `Button`, `RadioGroupButton`, `Input`, `Textarea`, `Calendar`, `Checkbox`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
   - [Navigation](#navigation) — `Tabs`, `TabsRounded`, `Stepper`
   - [Overlays](#overlays) — `Popover`, `TooltipDark`, `TooltipLight`
   - [Utility](#utility) — `Tag`, `CopyTextTrigger`
-  - [Workflow](#workflow) — `ApprovalRoute`
+  - [Workflow](#workflow) — `ApprovalRoute`, `CommentFeed`, `DetailView`, `SideNav`
 - [Hooks & helpers](#hooks--helpers)
 - [Icons](#icons)
 - [TypeScript](#typescript)
@@ -86,6 +86,19 @@ import "@andreyfedkovich/cozy-ui/styles.css";
 
 Sizing uses CSS `rem` against the browser’s default root font size (commonly **16px**). You **do not** need to set `html { font-size: … }` for components to match the library demo.
 
+### Tailwind-powered components
+
+Most Cozy UI styles come from SCSS modules bundled into `styles.css`. Components built on shadcn use Tailwind class names in JS; those utilities are **prebuilt into the same** `@andreyfedkovich/cozy-ui/styles.css` when the package is published. You do **not** need Tailwind CSS in your application.
+
+If your app already uses Tailwind v4 and you prefer to generate utilities yourself, you may add `@source` pointing at the library bundle — optional, not required.
+
+### Adding a new Tailwind-based component (library authors)
+
+1. Primitive in `src/components/ui/<name>.tsx` (Tailwind + Radix as needed).
+2. Public API in `src/lib/components/<Name>/` (field label, errors, value; SCSS optional for the trigger shell).
+3. Ensure paths are covered by `@source` in `src/lib/tailwind.css` (`../lib/**/*`, `../components/ui/**/*`).
+4. Run `npm run build:lib` before publish; verify `dist-lib/styles.css` includes the new classes.
+
 ---
 
 ## Quick start
@@ -347,10 +360,47 @@ const [email, setEmail] = useState("");
 />;
 ```
 
+#### `Textarea`
+
+Accessible multiline text field with optional label and validation message for product forms.
+
+| Prop                     | Type                                       | Default | Description                              |
+| ------------------------ | ------------------------------------------ | ------- | ---------------------------------------- |
+| `label`                  | `ReactNode`                                | —       | Field label above the textarea.          |
+| `tooltipContent`         | `ReactNode`                                | —       | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`                                   | —       | Extra class for the tooltip popper.      |
+| `error`                  | `string \| null`                           | —       | Validation message under the textarea. |
+| `disabled`               | `boolean`                                  | `false` | Disabled state.                          |
+| `className`              | `string`                                   | —       | Wrapper class.                           |
+| `textareaClassName`      | `string`                                   | —       | Native `<textarea>` class.               |
+| `...rest`                | `TextareaHTMLAttributes<HTMLTextAreaElement>` | —    | All native textarea props (`rows`, `placeholder`, `value`, `onChange`, etc.). |
+
+```tsx
+import { Textarea } from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [comment, setComment] = useState("");
+
+<Textarea
+  label="Comment"
+  placeholder="Write your message…"
+  rows={4}
+  value={comment}
+  onChange={(e) => setComment(e.target.value)}
+/>;
+
+<Textarea
+  label="Description"
+  error="Description is required."
+/>;
+```
+
 #### `Calendar`
 
 Date picker field for forms. Value is stored as `yyyy-MM-dd` (or `null`); the trigger shows `dd.MM.yyyy`. Includes helpers for parsing and serializing local calendar days.
 
+**Styling:** import `@andreyfedkovich/cozy-ui/styles.css` once (same as other components). Calendar popover and day grid use Tailwind utilities that are included in that file — no extra CSS or Tailwind config in your project.
+
 | Prop                      | Type                              | Default | Description                                              |
 | ------------------------- | --------------------------------- | ------- | -------------------------------------------------------- |
 | `label`                   | `string`                          | —       | Field label.                                             |
@@ -754,6 +804,66 @@ Edit mode:
 
 ---
 
+#### `SideNav`
+
+Premium vertical navigation panel with a user block on top, configurable sections, optional collapse and two visual variants — `classic` (light, reference-style) and `aurora` (deep gradient with glass and glow accents). Composition-first like `DetailView`.
+
+| Prop                | Type                                  | Default     | Description                                                          |
+| ------------------- | ------------------------------------- | ----------- | -------------------------------------------------------------------- |
+| `user`              | `SideNavUser`                         | —           | Built-in user block (avatar + name + role + optional status badge).  |
+| `userSlot`          | `ReactNode`                           | —           | Fully custom header content (overrides `user`).                      |
+| `sections`          | `SideNavSection[]`                    | —           | Declarative sections, each with `title` and `items`.                 |
+| `children`          | `ReactNode`                           | —           | Composition: `SideNav.Section`, `SideNav.Item`, `SideNav.Divider`, `SideNav.Custom`. |
+| `variant`           | `"classic" \| "aurora"`               | `"classic"` | Visual style switch.                                                 |
+| `activeId` / `defaultActiveId` | `string`                   | —           | Controlled / uncontrolled active item.                               |
+| `onActiveChange`    | `(id: string) => void`                | —           | Fires when an item is selected.                                      |
+| `collapsible`       | `boolean`                             | `false`     | Shows a collapse toggle in the header.                               |
+| `collapsed` / `defaultCollapsed` | `boolean`                | `false`     | Controlled / uncontrolled collapsed state.                           |
+| `width` / `collapsedWidth` | `number \| string`             | `280` / `76` | Panel width in expanded / collapsed mode.                            |
+| `footer`            | `ReactNode`                           | —           | Bottom slot (e.g. "Sign out").                                       |
+
+Each `SideNavItem` supports `icon`, `href`, `badge`, `active`, `disabled`, `onClick` and nested `children` (renders as a collapsible submenu).
+
+Declarative usage:
+
+```tsx
+import { SideNav, HomeIcon, ProfileIcon, ClockIcon } from "@andreyfedkovich/cozy-ui";
+
+<SideNav
+  variant="aurora"
+  collapsible
+  user={{ name: "Kate Petrova", role: "Head of Operations", badge: true }}
+  sections={[
+    { items: [{ id: "home", label: "Home", icon: <HomeIcon /> }] },
+    {
+      title: "For me",
+      items: [
+        { id: "profile", label: "My profile", icon: <ProfileIcon /> },
+        { id: "time",    label: "Working time", icon: <ClockIcon />, badge: "3" },
+      ],
+    },
+  ]}
+  onActiveChange={(id) => console.log(id)}
+/>;
+```
+
+Composition-first (like `DetailView`):
+
+```tsx
+<SideNav user={...} variant="classic">
+  <SideNav.Section title="For me">
+    <SideNav.Item id="profile" icon={<ProfileIcon />} label="My profile" />
+    <SideNav.Item id="time"    icon={<ClockIcon />}   label="Working time" badge="3" />
+  </SideNav.Section>
+  <SideNav.Divider />
+  <SideNav.Section title="Custom">
+    <SideNav.Custom>{/* any JSX */}</SideNav.Custom>
+  </SideNav.Section>
+</SideNav>
+```
+
+---
+
 ## Hooks & helpers
 
 ### `useMeasureElement`
@@ -849,7 +959,7 @@ For per-component overrides, every component accepts a `className` prop and uses
 ```bash
 bun install
 bun run dev          # demo playground at http://localhost:5173
-bun run build:lib    # produce dist/ (ESM + CJS + .d.ts + styles.css)
+bun run build:lib    # dist-lib/ (ESM + CJS + .d.ts + styles.css with SCSS + Tailwind)
 bun run lint
 bun run format
 ```
@@ -875,9 +985,10 @@ PRs are welcome. Please:
 1. Run `bun run lint && bun run format` before pushing.
 2. Add the new component to `src/lib/components/index.ts` and demo it in `src/routes/index.tsx`.
 3. Document any new prop in this README.
+4. Record library changes in `CHANGELOG.md` under **Unreleased**; when publishing to npm, move them into a dated `## X.Y.Z` section and clear **Unreleased**.
 
 ---
 
 ## License
 
-MIT © Andrey Fedkovich
+MIT © Andrey Fedkovich

package/dist-lib/index.d.ts

@@ -42,6 +42,7 @@ import { default as MarketIcon } from './market.svg?react';
 import { default as MegaphoneIcon } from './megaphone.svg?react';
 import { MemoExoticComponent } from 'react';
 import { default as MessageIcon } from './message.svg?react';
+import { MouseEvent as MouseEvent_2 } from 'react';
 import { default as NotebookIcon } from './notebook.svg?react';
 import { default as PhoneIcon } from './phone.svg?react';
 import { default as PlaneIcon } from './plane.svg?react';
@@ -57,6 +58,7 @@ import { default as SchoolIcon } from './school.svg?react';
 import { default as SearchIcon } from './search.svg?react';
 import { default as SettingsIcon } from './settings.svg?react';
 import { default as TaskListIcon } from './taskList.svg?react';
+import { TextareaHTMLAttributes } from 'react';
 import { default as TimesheetIcon } from './timesheet.svg?react';
 import { default as TrendUpIcon } from './trendUp.svg?react';
 import { default as UserSwitchIcon } from './userSwitch.svg?react';
@@ -204,6 +206,9 @@ export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInpu
     label?: ReactNode;
     error?: string | null;
     checkboxClassName?: string;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
 }
 
 export { CheckGreen }
@@ -368,6 +373,11 @@ export declare interface CopyTextTriggerProps {
 
 export { CrossIcon }
 
+declare const CustomEl: FC<{
+    children?: ReactNode;
+    className?: string;
+}>;
+
 export declare interface CustomOption<T, S = string> {
     value: S;
     label: string;
@@ -510,6 +520,10 @@ declare const DividerEl: FC<{
     className?: string;
 }>;
 
+declare const DividerEl_2: FC<{
+    className?: string;
+}>;
+
 export { DoneIcon }
 
 export { DownloadIcon }
@@ -591,6 +605,10 @@ export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement
 
 export { IslandIcon }
 
+declare interface ItemProps extends SideNavItem {
+    level?: number;
+}
+
 export declare const Label: ({ htmlFor, children, className }: LabelProps) => JSX.Element;
 
 declare interface LabelProps {
@@ -744,6 +762,9 @@ declare interface SectionComponentProps extends Omit<DetailSection, "fields"> {
     children?: ReactNode;
 }
 
+declare interface SectionProps extends SideNavSection {
+}
+
 export declare const Select: <T, S extends string | number>({ options, value, mode, placeholder, onChange, dropdownRender, optionRender, selectedOptionRender, dropdownIcon, tagRender, dropDownClassName, optionClassName, inputClassName, deleteIconClassName, onDelete, onClear, label, tooltipContent, tooltipPopperClassName, onSearch, searchClassName, searchPlaceholder, isLoading, disabled, onClose, portalTarget, error, fixedHeight, template, columns, total, }: CustomSelectProps<T, S>) => JSX.Element;
 
 export declare type SelectColumn<T, S> = {
@@ -755,6 +776,69 @@ export declare type SelectColumn<T, S> = {
 
 export { SettingsIcon }
 
+export declare const SideNav: SideNavComponent;
+
+declare type SideNavComponent = FC<SideNavProps> & {
+    Section: typeof SideNavSectionEl;
+    Item: typeof SideNavItemEl;
+    Divider: typeof DividerEl_2;
+    Custom: typeof CustomEl;
+};
+
+export declare interface SideNavItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    href?: string;
+    active?: boolean;
+    badge?: ReactNode;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent_2<HTMLAnchorElement | HTMLButtonElement>) => void;
+    children?: SideNavItem[];
+}
+
+declare const SideNavItemEl: FC<ItemProps>;
+
+export declare interface SideNavProps {
+    user?: SideNavUser;
+    userSlot?: ReactNode;
+    sections?: SideNavSection[];
+    children?: ReactNode;
+    variant?: SideNavVariant;
+    activeId?: string;
+    defaultActiveId?: string;
+    onActiveChange?: (id: string) => void;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (v: boolean) => void;
+    footer?: ReactNode;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    className?: string;
+}
+
+export declare interface SideNavSection {
+    id?: string;
+    title?: ReactNode;
+    items?: SideNavItem[];
+    children?: ReactNode;
+    className?: string;
+}
+
+declare const SideNavSectionEl: FC<SectionProps>;
+
+export declare interface SideNavUser {
+    name: string;
+    role?: ReactNode;
+    avatarUrl?: string;
+    initials?: string;
+    badge?: ReactNode;
+    onClick?: () => void;
+}
+
+export declare type SideNavVariant = "classic" | "aurora";
+
 export declare const Spinner: React_2.FC<Props>;
 
 declare type SpinnerSize = "big" | "small" | "extraSmall" | "medium" | "large";
@@ -829,6 +913,20 @@ export declare const Tag: FC<PropsWithChildren<Props_4>>;
 
 export { TaskListIcon }
 
+export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: ReactNode;
+    error?: string | null;
+    /** Neutral helper text under the textarea (hidden when `error` is set). */
+    hint?: ReactNode;
+    hintVariant?: InputCaptionVariant;
+    textareaClassName?: string;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
+}
+
 export { TimesheetIcon }
 
 export declare const todayLocalDay: () => Date;