@andreyfedkovich/cozy-ui 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/).
 Версии соответствуют [Semantic Versioning](https://semver.org/) и git-тегам `v*`.
 
+## 0.7.0 - 2026-05-26
+
+- **feat:** `SettingsView` — composition-first layout for settings pages (`SettingsView.Section`, `.Group`, `.Item`, `.Divider`), declarative `sections`, variants `classic` / `elevated`, densities `comfortable` / `compact`, collapsible sections, left icon badges, row badges (e.g. New/Beta), link rows (`href`, `external`), danger styling, and `render` for full row customization.
+- **feat:** `Switch` — iOS-style toggle (green by default, white thumb with shadow), controlled / uncontrolled, sizes `sm` / `md`, optional `blue` color.
+- **feat:** `ImageSegmented` — premium segmented control with image previews (Agent/Editor-style); `image` accepts any `ReactNode`.
+- **feat:** `SideNav` — `transparent` variant (seamless panel, compact rows, no chrome).
+
 ## 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.

package/README.md

@@ -35,7 +35,7 @@ npm i @andreyfedkovich/cozy-ui
   - [Navigation](#navigation) — `Tabs`, `TabsRounded`, `Stepper`
   - [Overlays](#overlays) — `Popover`, `TooltipDark`, `TooltipLight`
   - [Utility](#utility) — `Tag`, `CopyTextTrigger`
-  - [Workflow](#workflow) — `ApprovalRoute`, `CommentFeed`, `DetailView`, `SideNav`
+  - [Workflow](#workflow) — `ApprovalRoute`, `CommentFeed`, `DetailView`, `SideNav`, `SettingsView`, `Switch`, `ImageSegmented`
 - [Hooks & helpers](#hooks--helpers)
 - [Icons](#icons)
 - [TypeScript](#typescript)
@@ -806,7 +806,7 @@ 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`.
+Premium vertical navigation panel with a user block on top, configurable sections, optional collapse and three visual variants — `classic` (light, reference-style panel), `transparent` (seamless, no panel chrome, compact rows — feels like part of the page) and `aurora` (deep gradient with glass and glow accents). Composition-first like `DetailView`.
 
 | Prop                | Type                                  | Default     | Description                                                          |
 | ------------------- | ------------------------------------- | ----------- | -------------------------------------------------------------------- |
@@ -814,7 +814,7 @@ Premium vertical navigation panel with a user block on top, configurable section
 | `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.                                                 |
+| `variant`           | `"classic" \| "transparent" \| "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.                               |
@@ -864,6 +864,158 @@ Composition-first (like `DetailView`):
 
 ---
 
+#### `SettingsView`
+
+Composition-first layout for settings pages (like `DetailView`). Supports declarative `sections` or JSX via `SettingsView.Section`, `SettingsView.Group`, `SettingsView.Item`, and `SettingsView.Divider`. Two visual variants (`classic` / `elevated`), two densities (`comfortable` / `compact`), collapsible sections, left icon badges, row badges (e.g. New/Beta), link rows (`href`, `external`), danger styling, and `render` for full row customization.
+
+| Prop          | Type                                      | Default         | Description                                              |
+| ------------- | ----------------------------------------- | --------------- | -------------------------------------------------------- |
+| `sections`    | `SettingsSection[]`                       | —               | Declarative sections with items and optional groups.     |
+| `children`    | `ReactNode`                               | —               | Composition API subcomponents.                           |
+| `variant`     | `"classic" \| "elevated"`                 | `"classic"`     | Visual style.                                            |
+| `density`     | `"comfortable" \| "compact"`              | `"comfortable"` | Row spacing.                                             |
+| `layout`      | `"card" \| "plain"`                       | `"card"`        | Section wrapper style.                                   |
+| `loading`     | `boolean`                                 | —               | Shows a spinner instead of content.                      |
+| `emptyState`  | `ReactNode`                               | —               | Custom empty state when there is no content.             |
+
+Each `SettingsItem` (in `sections` or `<SettingsView.Item />`) supports `icon`, `label`, `description`, `control`, `badge`, `hint`, `href`, `external`, `danger`, `disabled`, `onClick`, and `render` for full row customization.
+
+```tsx
+import { SettingsView, Switch } from "@andreyfedkovich/cozy-ui";
+
+<SettingsView
+  variant="classic"
+  density="comfortable"
+  sections={[
+    {
+      id: "general",
+      title: "General",
+      items: [
+        {
+          id: "notifications",
+          label: "Notifications",
+          description: "Email and push alerts",
+          control: <Switch defaultChecked ariaLabel="Notifications" />,
+        },
+        {
+          id: "import",
+          label: "Import from VS Code",
+          description: "Settings, extensions, and keybindings",
+          badge: "New",
+        },
+        {
+          id: "docs",
+          label: "Documentation",
+          href: "https://example.com/docs",
+          external: true,
+        },
+        {
+          id: "delete",
+          label: "Delete account",
+          description: "Permanently remove your data",
+          danger: true,
+          onClick: () => confirm("Delete account?"),
+        },
+      ],
+    },
+  ]}
+/>;
+```
+
+Composition-first:
+
+```tsx
+<SettingsView variant="elevated">
+  <SettingsView.Section title="Privacy" collapsible defaultOpen>
+    <SettingsView.Item label="Analytics" control={<Switch ariaLabel="Analytics" />} />
+    <SettingsView.Divider />
+    <SettingsView.Group title="Advanced">
+      <SettingsView.Item label="Debug mode" control={<Switch size="sm" ariaLabel="Debug" />} />
+    </SettingsView.Group>
+  </SettingsView.Section>
+</SettingsView>
+```
+
+---
+
+#### `Switch`
+
+iOS-style toggle with a green track by default, white thumb and shadow. Controlled or uncontrolled; sizes `sm` / `md`; optional `blue` accent.
+
+| Prop              | Type                        | Default   | Description                    |
+| ----------------- | --------------------------- | --------- | ------------------------------ |
+| `checked`         | `boolean`                   | —         | Controlled value.              |
+| `defaultChecked`  | `boolean`                   | —         | Initial value (uncontrolled).  |
+| `onChange`        | `(next: boolean) => void`   | —         | Fires when toggled.            |
+| `size`            | `"sm" \| "md"`              | `"md"`    | Track and thumb size.          |
+| `color`           | `"green" \| "blue"`         | `"green"` | Active track color.            |
+| `disabled`        | `boolean`                   | —         | Disables interaction.          |
+| `ariaLabel`       | `string`                    | —         | Accessible name.               |
+
+```tsx
+import { useState } from "react";
+import { Switch } from "@andreyfedkovich/cozy-ui";
+
+// Uncontrolled
+<Switch defaultChecked ariaLabel="Dark mode" onChange={(v) => console.log(v)} />
+
+// Controlled
+const [on, setOn] = useState(true);
+<Switch checked={on} onChange={setOn} size="sm" color="blue" ariaLabel="Sync" />
+```
+
+---
+
+#### `ImageSegmented`
+
+Premium segmented control with image previews (Agent/Editor-style). Each option accepts any `ReactNode` in `image` — SVG, screenshot, or custom markup.
+
+| Prop       | Type                                      | Default | Description                          |
+| ---------- | ----------------------------------------- | ------- | ------------------------------------ |
+| `value`    | `T extends string`                        | —       | Selected option value (controlled).  |
+| `onChange` | `(next: T) => void`                       | —       | Fires when selection changes.        |
+| `options`  | `ImageSegmentedOption<T>[]`               | —       | `value`, `label`, `image`, `disabled?`. |
+| `size`     | `"sm" \| "md"`                            | `"md"`  | Option size.                         |
+| `ariaLabel`| `string`                                  | —       | Accessible name for the radiogroup.  |
+
+```tsx
+import { useState } from "react";
+import { ImageSegmented } from "@andreyfedkovich/cozy-ui";
+
+const [layout, setLayout] = useState<"agent" | "editor">("agent");
+
+<ImageSegmented
+  ariaLabel="Window layout"
+  value={layout}
+  onChange={setLayout}
+  options={[
+    {
+      value: "agent",
+      label: "Agent",
+      image: (
+        <svg viewBox="0 0 48 32" aria-hidden>
+          <rect width="48" height="32" rx="3" fill="#eef3fb" />
+          <rect x="3" y="3" width="18" height="26" rx="2" fill="#4573d9" opacity="0.85" />
+          <rect x="23" y="3" width="22" height="26" rx="2" fill="#fff" stroke="#dde5f5" />
+        </svg>
+      ),
+    },
+    {
+      value: "editor",
+      label: "Editor",
+      image: (
+        <svg viewBox="0 0 48 32" aria-hidden>
+          <rect width="48" height="32" rx="3" fill="#eef3fb" />
+          <rect x="3" y="3" width="42" height="26" rx="2" fill="#fff" stroke="#dde5f5" />
+        </svg>
+      ),
+    },
+  ]}
+/>;
+```
+
+---
+
 ## Hooks & helpers
 
 ### `useMeasureElement`

package/dist-lib/index.d.ts

@@ -414,7 +414,6 @@ declare type CustomSelectProps<T, S> = {
     onClose?: () => void;
     portalTarget?: Element;
     error?: string | null;
-    fixedHeight?: boolean;
     template?: "list" | "table";
     columns?: SelectColumn<T, S>[];
     total?: number;
@@ -524,6 +523,10 @@ declare const DividerEl_2: FC<{
     className?: string;
 }>;
 
+declare const DividerEl_3: FC<{
+    className?: string;
+}>;
+
 export { DoneIcon }
 
 export { DownloadIcon }
@@ -570,6 +573,8 @@ export { GraduateIcon }
 
 export { GridIcon }
 
+declare const GroupBlock: FC<SettingsGroup>;
+
 export { HeartIcon }
 
 export { HelpIcon }
@@ -578,6 +583,24 @@ export { HistoryBlue }
 
 export { HomeIcon }
 
+export declare function ImageSegmented<T extends string = string>({ value, onChange, options, size, ariaLabel, className, }: ImageSegmentedProps<T>): JSX.Element;
+
+export declare interface ImageSegmentedOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    image: ReactNode;
+    disabled?: boolean;
+}
+
+export declare interface ImageSegmentedProps<T extends string = string> {
+    value: T;
+    onChange: (next: T) => void;
+    options: ImageSegmentedOption<T>[];
+    size?: "sm" | "md";
+    ariaLabel?: string;
+    className?: string;
+}
+
 export { InfoIcon }
 
 export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
@@ -605,10 +628,15 @@ export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement
 
 export { IslandIcon }
 
+declare interface ItemComponentProps extends SettingsItem {
+}
+
 declare interface ItemProps extends SideNavItem {
     level?: number;
 }
 
+declare const ItemRow: FC<ItemComponentProps>;
+
 export declare const Label: ({ htmlFor, children, className }: LabelProps) => JSX.Element;
 
 declare interface LabelProps {
@@ -757,6 +785,8 @@ export { SearchIcon }
 
 declare const SectionBlock: FC<SectionComponentProps>;
 
+declare const SectionBlock_2: FC<SettingsSection>;
+
 declare interface SectionComponentProps extends Omit<DetailSection, "fields"> {
     fields?: DetailField[];
     children?: ReactNode;
@@ -765,7 +795,7 @@ declare interface SectionComponentProps extends Omit<DetailSection, "fields"> {
 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 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, template, columns, total, }: CustomSelectProps<T, S>) => JSX.Element;
 
 export declare type SelectColumn<T, S> = {
     key: string;
@@ -774,8 +804,77 @@ export declare type SelectColumn<T, S> = {
     render: (option: CustomOption<T, S>) => ReactNode;
 };
 
+export declare type SettingsDensity = "comfortable" | "compact";
+
+export declare interface SettingsGroup {
+    id?: string;
+    title?: ReactNode;
+    items?: SettingsItem[];
+    children?: ReactNode;
+    className?: string;
+}
+
 export { SettingsIcon }
 
+export declare interface SettingsItem {
+    id?: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    control?: ReactNode;
+    badge?: ReactNode;
+    hint?: ReactNode;
+    href?: string;
+    external?: boolean;
+    onClick?: (e: MouseEvent_2<HTMLElement>) => void;
+    disabled?: boolean;
+    danger?: boolean;
+    hidden?: boolean;
+    align?: "center" | "start";
+    className?: string;
+    render?: (ctx: {
+        label: ReactNode;
+        control: ReactNode;
+    }) => ReactNode;
+}
+
+export declare type SettingsLayout = "card" | "plain";
+
+export declare interface SettingsSection {
+    id?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    items?: SettingsItem[];
+    groups?: SettingsGroup[];
+    children?: ReactNode;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    className?: string;
+}
+
+export declare type SettingsVariant = "classic" | "elevated";
+
+export declare const SettingsView: SettingsViewComponent;
+
+declare type SettingsViewComponent = FC<SettingsViewProps> & {
+    Section: typeof SectionBlock_2;
+    Group: typeof GroupBlock;
+    Item: typeof ItemRow;
+    Divider: typeof DividerEl_3;
+};
+
+export declare interface SettingsViewProps {
+    sections?: SettingsSection[];
+    children?: ReactNode;
+    layout?: SettingsLayout;
+    density?: SettingsDensity;
+    variant?: SettingsVariant;
+    loading?: boolean;
+    emptyState?: ReactNode;
+    className?: string;
+    id?: string;
+}
+
 export declare const SideNav: SideNavComponent;
 
 declare type SideNavComponent = FC<SideNavProps> & {
@@ -837,7 +936,7 @@ export declare interface SideNavUser {
     onClick?: () => void;
 }
 
-export declare type SideNavVariant = "classic" | "aurora";
+export declare type SideNavVariant = "classic" | "aurora" | "transparent";
 
 export declare const Spinner: React_2.FC<Props>;
 
@@ -860,6 +959,20 @@ export declare interface StepperProps {
     className?: string;
 }
 
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (next: boolean) => void;
+    disabled?: boolean;
+    size?: "sm" | "md";
+    color?: "green" | "blue";
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+}
+
 export declare type TabItem = TabItemLegacy_2 | {
     value: string | number;
     label: string;