@andreyfedkovich/cozy-ui 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- **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.2.1
 
 - **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`).

package/README.md

@@ -31,7 +31,7 @@ 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`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
+  - [Inputs & forms](#inputs--forms) — `Button`, `RadioGroupButton`, `Input`, `Calendar`, `Checkbox`, `Select`, `DialogSelect`, `TreeDialogSelect`, `InputCaption`, `Label`
   - [Navigation](#navigation) — `Tabs`, `TabsRounded`, `Stepper`
   - [Overlays](#overlays) — `Popover`, `TooltipDark`, `TooltipLight`
   - [Utility](#utility) — `Tag`, `CopyTextTrigger`
@@ -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
@@ -312,6 +325,123 @@ const [view, setView] = useState<"grid" | "list">("grid");
 />;
 ```
 
+#### `Input`
+
+Accessible text field with optional label and validation message for product forms.
+
+| Prop             | Type                                    | Default | Description                          |
+| ---------------- | --------------------------------------- | ------- | ------------------------------------ |
+| `label`                  | `ReactNode`      | —       | Field label above the input.                         |
+| `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 input.                  |
+| `disabled`       | `boolean`                               | `false` | Disabled state.                      |
+| `className`      | `string`                                | —       | Wrapper class.                       |
+| `inputClassName` | `string`                                | —       | Native `<input>` class.              |
+| `...rest`        | `InputHTMLAttributes<HTMLInputElement>` | —       | All native input props.              |
+
+```tsx
+import { Input } from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [email, setEmail] = useState("");
+
+<Input
+  label="Email"
+  placeholder="you@company.com"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>;
+
+<Input
+  label="Password"
+  type="password"
+  error="Minimum 8 characters."
+/>;
+```
+
+#### `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.                                             |
+| `required`                | `boolean`                         | `false` | Appends ` *` to the label.                               |
+| `value`                   | `string \| null`                  | —       | Selected date as `yyyy-MM-dd`.                           |
+| `onChange`                | `(value: string \| null) => void` | —       | Called when the user picks or clears a date.             |
+| `minDate`                 | `Date`                            | —       | Earliest selectable day (inclusive, local calendar).     |
+| `error`                   | `string \| null`                  | —       | Validation message under the field.                      |
+| `disabled`                | `boolean`                         | `false` | Disables the trigger.                                    |
+| `tooltipContent`          | `ReactNode`                       | —       | Help tooltip on the «i» icon next to the label.          |
+| `tooltipPopperClassName`  | `string`                          | —       | Extra class for the tooltip popper.                      |
+| `className`               | `string`                          | —       | Wrapper class.                                           |
+
+Exported utilities: `startOfLocalDay`, `todayLocalDay`, `toYmdString`, `parseYmdToLocalDay`.
+
+```tsx
+import {
+  Calendar,
+  todayLocalDay,
+} from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [startDate, setStartDate] = useState<string | null>(null);
+
+<Calendar
+  label="Дата начала"
+  required
+  value={startDate}
+  onChange={setStartDate}
+  minDate={todayLocalDay()}
+/>;
+
+<Calendar
+  label="Дедлайн"
+  value={startDate}
+  onChange={setStartDate}
+  error="Укажите дату."
+  tooltipContent="Дата должна быть не раньше сегодня."
+/>;
+```
+
+#### `Checkbox`
+
+Accessible checkbox with a custom premium box, optional inline label, and validation message.
+
+| Prop                | Type                                         | Default | Description                              |
+| ------------------- | -------------------------------------------- | ------- | ---------------------------------------- |
+| `label`             | `ReactNode`                                  | —       | Label text to the right of the checkbox. |
+| `error`             | `string \| null`                             | —       | Validation message under the control.    |
+| `disabled`          | `boolean`                                    | `false` | Disabled state.                          |
+| `className`         | `string`                                     | —       | Wrapper class.                           |
+| `checkboxClassName` | `string`                                     | —       | Class on the visual checkbox box.        |
+| `...rest`           | `Omit<InputHTMLAttributes<HTMLInputElement>, "type">` | — | All native checkbox props (`checked`, `onChange`, `name`, etc.). |
+
+```tsx
+import { Checkbox } from "@andreyfedkovich/cozy-ui";
+import { useState } from "react";
+
+const [agreed, setAgreed] = useState(false);
+
+<Checkbox
+  label="Согласен с условиями обработки данных"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+/>;
+
+<Checkbox label="Уведомления по email" defaultChecked disabled />;
+
+<Checkbox
+  label="Обязательное согласие"
+  checked={agreed}
+  onChange={(e) => setAgreed(e.target.checked)}
+  error={agreed ? null : "Необходимо принять условия."}
+/>;
+```
+
 #### `Select`
 
 Powerful, virtualized-friendly select with `single` and `multiple` modes, search, custom rendering, and table layout.
@@ -327,7 +457,9 @@ Powerful, virtualized-friendly select with `single` and `multiple` modes, search
 | `columns`     | `SelectColumn[]`                      | —          | Required when `template="table"`.    |
 | `isLoading`   | `boolean`                             | `false`    | Show loading state in dropdown.      |
 | `error`       | `string \| null`                      | —          | Validation message.                  |
-| `label`       | `ReactNode`                           | —          | Field label.                         |
+| `label`                  | `ReactNode` | —          | Field label.                                    |
+| `tooltipContent`         | `ReactNode` | —          | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | —          | Extra class for the tooltip popper.             |
 
 ```tsx
 import { Select, type CustomOption } from "@andreyfedkovich/cozy-ui";
@@ -354,6 +486,12 @@ const [value, setValue] = useState<CustomOption<unknown, string> | null>(null);
 
 Dialog-based picker for large datasets — search + paginated loading + multi-select.
 
+| Prop                     | Type        | Description                                     |
+| ------------------------ | ----------- | ----------------------------------------------- |
+| `label`                  | `ReactNode` | Field label above the trigger.                  |
+| `tooltipContent`         | `ReactNode` | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | Extra class for the tooltip popper.             |
+
 ```tsx
 import { DialogSelect } from "@andreyfedkovich/cozy-ui";
 
@@ -373,6 +511,12 @@ import { DialogSelect } from "@andreyfedkovich/cozy-ui";
 
 Hierarchical picker with lazy-loaded branches and search.
 
+| Prop                     | Type        | Description                                     |
+| ------------------------ | ----------- | ----------------------------------------------- |
+| `label`                  | `ReactNode` | Field label above the trigger.                  |
+| `tooltipContent`         | `ReactNode` | Help tooltip on the «?» icon next to the label. |
+| `tooltipPopperClassName` | `string`    | Extra class for the tooltip popper.             |
+
 ```tsx
 import { TreeDialogSelect } from "@andreyfedkovich/cozy-ui";
 
@@ -720,7 +864,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
 ```
@@ -751,4 +895,4 @@ PRs are welcome. Please:
 
 ## License
 
-MIT © Andrey Fedkovich
+MIT © Andrey Fedkovich

package/dist-lib/index.d.ts

@@ -25,6 +25,7 @@ import { default as FileReloadIcon } from './fileReload.svg?react';
 import { default as FileSync } from './fileSync.svg?react';
 import { default as FilterIcon } from './filter.svg?react';
 import { default as FolderEditIcon } from './folderEdit.svg?react';
+import { ForwardRefExoticComponent } from 'react';
 import { default as GraduateIcon } from './graduate.svg?react';
 import { default as GridIcon } from './grid.svg?react';
 import { default as HeartIcon } from './heart.svg?react';
@@ -33,6 +34,7 @@ import { default as HistoryBlue } from './historyBlue.svg?react';
 import { default as HomeIcon } from './home.svg?react';
 import { HTMLAttributes } from 'react';
 import { default as InfoIcon } from './info.svg?react';
+import { InputHTMLAttributes } from 'react';
 import { default as IslandIcon } from './island.svg?react';
 import { JSX } from 'react/jsx-runtime';
 import { default as ListIcon } from './list.svg?react';
@@ -48,6 +50,7 @@ import { default as ProfileSearchIcon } from './profileSearch.svg?react';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { default as ReloadIcon } from './reload.svg?react';
 import { default as SchoolIcon } from './school.svg?react';
@@ -131,6 +134,23 @@ declare type ButtonSize = "small" | "medium" | "large";
 
 declare type ButtonVariant = "default" | "primary" | "secondary" | "text" | "link" | "danger";
 
+export declare const Calendar: ({ label, required, value, onChange, minDate, error, disabled, tooltipContent, tooltipPopperClassName, className, }: CalendarProps) => JSX.Element;
+
+export declare interface CalendarProps {
+    label: string;
+    required?: boolean;
+    value?: string | null;
+    onChange: (value: string | null) => void;
+    /** Нижняя граница выбора (включительно), локальный календарный день */
+    minDate?: Date;
+    error?: string | null;
+    disabled?: boolean;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
+    className?: string;
+}
+
 export { CameraIcon }
 
 export { CancelIcon }
@@ -178,6 +198,14 @@ export { ChartIcon }
 
 export { ChatIcon }
 
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: ReactNode;
+    error?: string | null;
+    checkboxClassName?: string;
+}
+
 export { CheckGreen }
 
 export { ClockFilledIcon }
@@ -367,6 +395,9 @@ declare type CustomSelectProps<T, S> = {
     onClear?: () => void;
     icon?: ReactNode;
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     onSearch?: (value: string) => void;
     isLoading?: boolean;
     disabled?: boolean;
@@ -440,7 +471,7 @@ export declare interface DetailViewProps {
     id?: string;
 }
 
-export declare const DialogSelect: <T, S extends string | number>({ value, placeholder, loadOptions, onChange, onClear, columns, label, title, searchPlaceholder, selectButtonText, closeButtonText, manualButtonText, onManualAdd, pageSize, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, }: DialogSelectProps<T, S>) => JSX.Element;
+export declare const DialogSelect: <T, S extends string | number>({ value, placeholder, loadOptions, onChange, onClear, columns, label, tooltipContent, tooltipPopperClassName, title, searchPlaceholder, selectButtonText, closeButtonText, manualButtonText, onManualAdd, pageSize, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, }: DialogSelectProps<T, S>) => JSX.Element;
 
 export declare type DialogSelectColumn<T, S extends string | number> = {
     key: string;
@@ -457,6 +488,9 @@ export declare interface DialogSelectProps<T, S extends string | number> {
     onClear?: () => void;
     columns?: DialogSelectColumn<T, S>[];
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     title?: ReactNode;
     searchPlaceholder?: string;
     selectButtonText?: string;
@@ -532,6 +566,8 @@ export { HomeIcon }
 
 export { InfoIcon }
 
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
 export declare const InputCaption: React_2.FC<PropsWithChildren<InputCaptionProps>>;
 
 declare interface InputCaptionProps {
@@ -544,6 +580,15 @@ declare interface InputCaptionProps {
 
 export declare type InputCaptionVariant = "neutral" | "error" | "success";
 
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: ReactNode;
+    error?: string | null;
+    inputClassName?: string;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
+}
+
 export { IslandIcon }
 
 export declare const Label: ({ htmlFor, children, className }: LabelProps) => JSX.Element;
@@ -595,6 +640,8 @@ declare type ModeProps<T, S> = {
 
 export { NotebookIcon }
 
+export declare const parseYmdToLocalDay: (value: string | null | undefined) => Date | undefined;
+
 export { PhoneIcon }
 
 export { PlaneIcon }
@@ -697,7 +744,7 @@ declare interface SectionComponentProps extends Omit<DetailSection, "fields"> {
     children?: ReactNode;
 }
 
-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, onSearch, searchClassName, searchPlaceholder, isLoading, disabled, onClose, portalTarget, error, fixedHeight, template, columns, total, }: CustomSelectProps<T, S>) => JSX.Element;
+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> = {
     key: string;
@@ -712,6 +759,8 @@ export declare const Spinner: React_2.FC<Props>;
 
 declare type SpinnerSize = "big" | "small" | "extraSmall" | "medium" | "large";
 
+export declare const startOfLocalDay: (d: Date) => Date;
+
 export declare const Stepper: default_2.FC<StepperProps>;
 
 export declare type StepperItem = {
@@ -782,6 +831,8 @@ export { TaskListIcon }
 
 export { TimesheetIcon }
 
+export declare const todayLocalDay: () => Date;
+
 export declare const TooltipDark: MemoExoticComponent<({ title, content, open: openProp, defaultOpen, trigger, mouseEnterDelay, mouseLeaveDelay, onOpenChange, placement, arrow, children, overlayClassName, getPopupContainer, }: TooltipProps) => JSX.Element>;
 
 export declare const TooltipLight: FC<TooltipLightProps>;
@@ -825,7 +876,10 @@ declare type TooltipTarget = string | HTMLElement | RefObject<HTMLElement | null
 
 export declare type TooltipTrigger = "hover" | "click";
 
-export declare const TreeDialogSelect: <T, S extends string | number>({ value, placeholder, loadChildren: loadChildrenProp, loadNodes, searchNodes, onChange, onClear, label, title, searchPlaceholder, selectButtonText, closeButtonText, confirmButtonText, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, nodeRender, leafConfirmOnly, }: TreeDialogSelectProps<T, S>) => JSX.Element;
+/** `yyyy-MM-dd` for API / form state */
+export declare const toYmdString: (d: Date) => string;
+
+export declare const TreeDialogSelect: <T, S extends string | number>({ value, placeholder, loadChildren: loadChildrenProp, loadNodes, searchNodes, onChange, onClear, label, tooltipContent, tooltipPopperClassName, title, searchPlaceholder, selectButtonText, closeButtonText, confirmButtonText, debounceMs, disabled, error, className, inputClassName, selectedOptionRender, nodeRender, leafConfirmOnly, }: TreeDialogSelectProps<T, S>) => JSX.Element;
 
 /** Pass either {@link loadNodes} or {@link loadChildren} (deprecated alias). */
 export declare type TreeDialogSelectProps<T, S extends string | number> = TreeDialogSelectShared<T, S> & ({
@@ -843,6 +897,9 @@ declare interface TreeDialogSelectShared<T, S extends string | number> {
     onChange?: (node: TreeNode<T, S>) => void;
     onClear?: () => void;
     label?: ReactNode;
+    /** Подсказка по наведению на иконку «?» справа от подписи */
+    tooltipContent?: ReactNode;
+    tooltipPopperClassName?: string;
     title?: ReactNode;
     searchPlaceholder?: string;
     selectButtonText?: string;