@elcrm/components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MaSkal
+
+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

@@ -0,0 +1,352 @@
+# @elcrm/components
+
+Shell UI для elCRM: `Layout`, `Header`, `Section`, `NavSections`, `TabSections`, `Row`, `Column` и др.
+
+Стили — CSS Modules с короткими уникальными классами; значения токенов задаёт приложение (`theme-dark.css` / `theme-light.css`). Fallback в пакете нет.
+
+## Установка
+
+```bash
+bun i @elcrm/components
+```
+
+```ts
+import {
+  Layout,
+  Header,
+  Footer,
+  List,
+  Item,
+  Card,
+  Block,
+  Row,
+  Column,
+  Menu,
+  Loading,
+  Section,
+  NavSections,
+  TabSections,
+  Avatar,
+  Badge,
+  Brand,
+  EmptyState,
+  createLazyResolver,
+} from "@elcrm/components";
+// CSS подтягивается с чанками; при необходимости единый файл:
+// import "@elcrm/components/style.css";
+```
+
+Точечный импорт:
+
+```ts
+import { Header } from "@elcrm/components/Header";
+import { Avatar } from "@elcrm/components/Avatar";
+```
+
+## Компоненты
+
+|                                  | Назначение                       | Ключевые props                                       |
+| -------------------------------- | -------------------------------- | ---------------------------------------------------- |
+| **Layout**                       | Оболочка страницы                | `header`, `footer`, `children`                       |
+| **Header**                       | Шапка со слотами                 | `brand`, `nav`, `search`, `actions`                  |
+| **Footer**                       | Подвал                           | `children`                                           |
+| **Brand**                        | Название / логотип               | `as`, `children`, `onClick`                          |
+| **Avatar**                       | Фото или инициалы                | `src`, `name`, `size`, `active`, `as`                |
+| **Badge**                        | Метка / статус                   | `tone`, `children`                                   |
+| **Menu**                         | Навигация (не overlay)           | `items`, `activeKey`, `vertical`, `onSelect`         |
+| **Section**                      | Блок страницы / auth / подраздел | `title`, `description`, `icon`, `actions`, `variant` |
+| **NavSections**                  | Сайдбар + lazy-панель            | `groups`, `resolveSection`, `defaultActiveKey`       |
+| **TabSections**                  | Горизонтальные вкладки + lazy    | `items` (+ `badge`), `resolveSection`                |
+| **Card**                         | Карточка                         | `title`, `children`                                  |
+| **List** / **Item**              | Список и строка                  | List: `row`; Item: `as`, `active`                    |
+| **Block** / **Row** / **Column** | Стеки                            | `gap`; Block ещё `row`                               |
+| **Loading**                      | Плейсхолдер загрузки             | `children`                                           |
+| **EmptyState**                   | Заглушка «нет данных»            | `title`, `description`, `icon`, `actions`            |
+| **createLazyResolver**           | Кэш `import()` секций            | `(key) => import(…)`                                 |
+
+Слоты `Header` заполняет приложение: поиск — `@elcrm/search`, кнопки — `@elcrm/button`, и т.д.
+
+## Пример
+
+```tsx
+<Layout
+  header={
+    <Header
+      brand={<Brand onClick={() => {}}>App</Brand>}
+      nav={<Menu items={[{ key: "home", label: "Главная", active: true }]} />}
+      actions={
+        <>
+          <Avatar as="button" name="Admin" />
+          <button type="button">Выйти</button>
+        </>
+      }
+    />
+  }
+  footer={<Footer>© elCRM</Footer>}>
+  <Section title="Профиль" description="Данные аккаунта">
+    <Card>
+      <List>
+        <li>
+          <Item as="li">Строка</Item>
+        </li>
+      </List>
+    </Card>
+  </Section>
+</Layout>;
+
+{
+  /* Экран входа */
+}
+<Section
+  variant="auth"
+  title="Вход"
+  description="Демо: admin / admin"
+  actions={<button type="button">Войти</button>}>
+  {/* поля формы */}
+</Section>;
+
+{
+  /* Настройки: меню слева + sections/*.tsx справа */
+}
+const resolve = createLazyResolver((key) => import(`./sections/${key}.tsx`));
+
+<NavSections
+  defaultActiveKey="Profile"
+  resolveSection={resolve}
+  groups={[
+    {
+      label: "Личное",
+      items: [
+        { key: "Profile", label: "Профиль" },
+        { key: "Appearance", label: "Оформление" },
+      ],
+    },
+  ]}
+/>;
+```
+
+Файлы секций: `sections/Profile.tsx`, `sections/Appearance.tsx` — `export default`.
+
+Горизонтальные вкладки (без своего заголовка — используйте `Section`):
+
+```tsx
+<Section title="Дети" description="Список">
+  <TabSections
+    defaultActiveKey="News"
+    resolveSection={createLazyResolver((k) => import(`./sections/${k}.tsx`))}
+    items={[
+      { key: "News", label: "Новые", badge: 1 },
+      { key: "Active", label: "Активные" },
+    ]}
+  />
+</Section>
+```
+
+## CSS-токены
+
+Тема приложения объявляет **все** переменные (fallback в пакете нет).  
+Эталон: panel `theme.css` (геометрия) + `theme-light` / `theme-dark` (цвета).
+
+**layout** · Loading
+
+```
+--layout-background
+--layout-gap
+--layout-min-height
+--loading-color
+--loading-padding
+```
+
+**header**
+
+```
+--header-background
+--header-border
+--header-color
+--header-gap
+--header-height
+--header-margin
+--header-padding
+--header-radius
+--header-shadow
+--header-z
+```
+
+**footer**
+
+```
+--footer-background
+--footer-border
+--footer-color
+--footer-font-size
+--footer-padding
+```
+
+**list** · Item
+
+```
+--list-gap
+--list-padding
+--item-background
+--item-background-active
+--item-background-hover
+--item-border
+--item-color
+--item-gap
+--item-padding
+--item-radius
+```
+
+**card** · Block · Row · Column
+
+```
+--card-background
+--card-border
+--card-padding
+--card-radius
+--card-shadow
+--block-gap
+--block-padding
+--row-gap
+--column-gap
+```
+
+**menu**
+
+```
+--menu-gap
+--menu-item-background
+--menu-item-background-active
+--menu-item-background-hover
+--menu-item-color
+--menu-item-color-active
+--menu-item-padding
+--menu-item-radius
+```
+
+**section**
+
+```
+--section-padding
+--section-gap
+--section-title-color
+--section-title-size
+--section-title-size-md
+--section-description-color
+--section-description-size
+--section-icon-gap
+--section-body-gap
+--section-actions-gap
+--section-auth-padding
+--section-auth-card-background
+--section-auth-card-border
+--section-auth-card-max-width
+--section-auth-card-padding
+--section-auth-card-radius
+--section-auth-card-shadow
+--section-block-border
+--section-block-margin-bottom
+--section-block-padding-bottom
+```
+
+**nav-sections**
+
+```
+--nav-sections-padding
+--nav-sections-gap
+--nav-sections-nav-width
+--nav-sections-main-max-width
+--nav-sections-label-color
+--nav-sections-item-color
+--nav-sections-item-background-hover
+--nav-sections-item-background-active
+--nav-sections-item-padding
+--nav-sections-item-radius
+--nav-sections-accent
+--nav-sections-icon-color
+--nav-sections-group-border
+--nav-sections-footer-border
+```
+
+**tab-sections**
+
+```
+--tab-sections-gap
+--tab-sections-border
+--tab-sections-color
+--tab-sections-color-active
+--tab-sections-accent
+--tab-sections-tab-gap
+--tab-sections-tab-padding
+--tab-sections-badge-background
+--tab-sections-badge-color
+--tab-sections-badge-size
+```
+
+**avatar**
+
+```
+--avatar-size-s
+--avatar-size-m
+--avatar-size-l
+--avatar-radius
+--avatar-font-size-s
+--avatar-font-size-m
+--avatar-font-size-l
+--avatar-font-weight
+--avatar-background
+--avatar-color
+--avatar-border
+--avatar-outline-active
+--avatar-outline-offset
+```
+
+**badge**
+
+```
+--badge-padding
+--badge-radius
+--badge-font-size
+--badge-font-weight
+--badge-border
+--badge-neutral-background
+--badge-neutral-color
+--badge-accent-background
+--badge-accent-color
+--badge-success-background
+--badge-success-color
+--badge-warning-background
+--badge-warning-color
+--badge-danger-background
+--badge-danger-color
+```
+
+**brand**
+
+```
+--brand-font-weight
+--brand-letter-spacing
+--brand-color
+--brand-color-hover
+```
+
+**empty-state**
+
+```
+--empty-state-gap
+--empty-state-padding
+--empty-state-icon-gap
+--empty-state-title-size
+--empty-state-description-size
+--empty-state-max-width
+--empty-state-actions-gap
+--empty-state-actions-margin-top
+--empty-state-color
+--empty-state-icon-color
+--empty-state-title-color
+--empty-state-description-color
+```
+
+## Лицензия
+
+MIT © MaSkal

package/dist/Avatar-DHNPaIjZ.js

@@ -0,0 +1,64 @@
+import c from "react";
+import { c as b } from "./cx-CcykAxZN.js";
+import './Avatar.css';const g = "car", N = "cas", E = "cam", C = "cal", h = "caa", x = "cai", e = {
+  r: g,
+  s: N,
+  m: E,
+  l: C,
+  a: h,
+  i: x
+};
+function z(n) {
+  const a = n.trim();
+  if (!a) return "?";
+  const s = a.split(/\s+/).filter(Boolean);
+  return s.length >= 2 ? (s[0][0] + s[1][0]).toUpperCase() : a.slice(0, 2).toUpperCase();
+}
+function y(n) {
+  const {
+    src: a,
+    alt: s,
+    name: l,
+    size: u = "m",
+    active: r,
+    children: p,
+    className: v,
+    as: d = "span",
+    ...i
+  } = n, f = u === "s" ? e.s : u === "l" ? e.l : e.m, o = b(e.r, f, r && e.a, v), t = s ?? l, m = a != null && a !== "" ? /* @__PURE__ */ c.createElement("img", { className: e.i, src: a, alt: t ?? "", draggable: !1 }) : p ?? (l != null ? z(l) : "?");
+  return d === "button" ? /* @__PURE__ */ c.createElement(
+    "button",
+    {
+      type: "button",
+      className: o,
+      "aria-label": t,
+      "data-active": r ? "true" : void 0,
+      ...i
+    },
+    m
+  ) : d === "div" ? /* @__PURE__ */ c.createElement(
+    "div",
+    {
+      className: o,
+      role: t ? "img" : void 0,
+      "aria-label": t,
+      "data-active": r ? "true" : void 0,
+      ...i
+    },
+    m
+  ) : /* @__PURE__ */ c.createElement(
+    "span",
+    {
+      className: o,
+      role: t ? "img" : void 0,
+      "aria-label": t,
+      "data-active": r ? "true" : void 0,
+      ...i
+    },
+    m
+  );
+}
+export {
+  y as A,
+  z as i
+};

package/dist/Avatar.css

@@ -0,0 +1 @@
+@layer elcrm-components{.car{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:var(--avatar-radius);border:var(--avatar-border);background:var(--avatar-background);color:var(--avatar-color);font-weight:var(--avatar-font-weight);line-height:1;-webkit-user-select:none;user-select:none;vertical-align:middle}.car:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font:inherit;font-weight:var(--avatar-font-weight);cursor:pointer}.cas{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.cam{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.cal{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}.caa,.car[data-active=true]{outline:var(--avatar-outline-active);outline-offset:var(--avatar-outline-offset)}.cai{width:100%;height:100%;object-fit:cover;display:block}}

package/dist/Avatar.d.ts

@@ -0,0 +1,2 @@
+export * from './Avatar/index'
+export {}

package/dist/Avatar.js

@@ -0,0 +1,5 @@
+import { A as r, i as m } from "./Avatar-DHNPaIjZ.js";
+export {
+  r as Avatar,
+  m as initialsFromName
+};

package/dist/Badge-l6nUkl-H.js

@@ -0,0 +1,22 @@
+import o from "react";
+import { c as e } from "./cx-CcykAxZN.js";
+import './Badge.css';const u = "cjr", d = "cjn", j = "cja", m = "cju", w = "cjw", i = "cjd", c = {
+  r: u,
+  n: d,
+  a: j,
+  u: m,
+  w,
+  d: i
+};
+function f({
+  tone: n = "neutral",
+  children: s,
+  className: a,
+  ...t
+}) {
+  const r = n === "accent" ? c.a : n === "success" ? c.u : n === "warning" ? c.w : n === "danger" ? c.d : c.n;
+  return /* @__PURE__ */ o.createElement("span", { className: e(c.r, r, a), ...t }, s);
+}
+export {
+  f as B
+};

package/dist/Badge.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:var(--badge-padding);border-radius:var(--badge-radius);border:var(--badge-border);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);line-height:1;white-space:nowrap}.cjn{background:var(--badge-neutral-background);color:var(--badge-neutral-color)}.cja{background:var(--badge-accent-background);color:var(--badge-accent-color)}.cju{background:var(--badge-success-background);color:var(--badge-success-color)}.cjw{background:var(--badge-warning-background);color:var(--badge-warning-color)}.cjd{background:var(--badge-danger-background);color:var(--badge-danger-color)}}

package/dist/Badge.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge/index'
+export {}

package/dist/Badge.js

@@ -0,0 +1,4 @@
+import { B as o } from "./Badge-l6nUkl-H.js";
+export {
+  o as Badge
+};

package/dist/Block-CVKukh1e.js

@@ -0,0 +1,28 @@
+import m from "react";
+import { c as n } from "./cx-CcykAxZN.js";
+import { s as i } from "./stackGap-CDsjER0g.js";
+import './Block.css';const l = "cbr", p = "cbh", t = {
+  r: l,
+  h: p
+};
+function k({
+  row: r,
+  gap: c,
+  children: o,
+  className: s,
+  style: e,
+  ...a
+}) {
+  return /* @__PURE__ */ m.createElement(
+    "div",
+    {
+      className: n(t.r, r && t.h, s),
+      style: { ...i(c), ...e },
+      ...a
+    },
+    o
+  );
+}
+export {
+  k as B
+};

package/dist/Block.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cbr{display:flex;flex-direction:column;gap:var(--block-gap);padding:var(--block-padding)}.cbh{flex-direction:row;flex-wrap:wrap;align-items:center}}

package/dist/Block.d.ts

@@ -0,0 +1,2 @@
+export * from './Block/index'
+export {}

package/dist/Block.js

@@ -0,0 +1,4 @@
+import { B } from "./Block-CVKukh1e.js";
+export {
+  B as Block
+};

package/dist/Brand-Zq-Idks4.js

@@ -0,0 +1,34 @@
+import n from "react";
+import { c as o } from "./cx-CcykAxZN.js";
+import './Brand.css';const m = "cnr", l = {
+  r: m
+};
+function f(a) {
+  const { as: s = "button", children: t, className: c, ...e } = a, r = o(l.r, c);
+  return s === "a" ? /* @__PURE__ */ n.createElement(
+    "a",
+    {
+      className: r,
+      ...e
+    },
+    t
+  ) : s === "strong" ? /* @__PURE__ */ n.createElement(
+    "strong",
+    {
+      className: r,
+      ...e
+    },
+    t
+  ) : /* @__PURE__ */ n.createElement(
+    "button",
+    {
+      type: "button",
+      className: r,
+      ...e
+    },
+    t
+  );
+}
+export {
+  f as B
+};

package/dist/Brand.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cnr{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0;background:transparent;font:inherit;font-weight:var(--brand-font-weight);letter-spacing:var(--brand-letter-spacing);color:var(--brand-color);white-space:nowrap;cursor:pointer;text-decoration:none}.cnr:hover{color:var(--brand-color-hover)}}

package/dist/Brand.d.ts

@@ -0,0 +1,2 @@
+export * from './Brand/index'
+export {}

package/dist/Brand.js

@@ -0,0 +1,4 @@
+import { B as o } from "./Brand-Zq-Idks4.js";
+export {
+  o as Brand
+};

package/dist/Card-hn37Opo3.js

@@ -0,0 +1,12 @@
+import r from "react";
+import { c as s } from "./cx-CcykAxZN.js";
+import './Card.css';const o = "cdr", m = "cdt", c = {
+  r: o,
+  t: m
+};
+function i({ title: t, children: e, className: a, ...n }) {
+  return /* @__PURE__ */ r.createElement("div", { className: s(c.r, a), ...n }, t != null ? /* @__PURE__ */ r.createElement("div", { className: c.t }, t) : null, e);
+}
+export {
+  i as C
+};

package/dist/Card.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cdr{background:var(--card-background);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:var(--card-padding);box-shadow:var(--card-shadow)}.cdt{margin:0 0 .5rem;font-size:1.125rem;font-weight:600}}

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+export * from './Card/index'
+export {}

package/dist/Card.js

@@ -0,0 +1,4 @@
+import { C as o } from "./Card-hn37Opo3.js";
+export {
+  o as Card
+};

package/dist/Column-DlNrvFq1.js

@@ -0,0 +1,26 @@
+import e from "react";
+import { c as a } from "./cx-CcykAxZN.js";
+import { s as m } from "./stackGap-CDsjER0g.js";
+import './Column.css';const n = "cor", i = {
+  r: n
+};
+function u({
+  gap: r,
+  children: t,
+  className: o,
+  style: s,
+  ...c
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: a(i.r, o),
+      style: { ...m(r), ...s },
+      ...c
+    },
+    t
+  );
+}
+export {
+  u as C
+};

package/dist/Column.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cor{display:flex;flex-direction:column;gap:var(--column-gap)}}

package/dist/Column.d.ts

@@ -0,0 +1,2 @@
+export * from './Column/index'
+export {}

package/dist/Column.js

@@ -0,0 +1,4 @@
+import { C as r } from "./Column-DlNrvFq1.js";
+export {
+  r as Column
+};

package/dist/EmptyState-mBiWtMIM.js

@@ -0,0 +1,23 @@
+import e from "react";
+import { c as u } from "./cx-CcykAxZN.js";
+import './EmptyState.css';const o = "cpr", p = "cpi", E = "cpt", d = "cpd", i = "cpa", t = {
+  r: o,
+  i: p,
+  t: E,
+  d,
+  a: i
+};
+function v({
+  title: l,
+  description: a,
+  icon: c,
+  actions: n,
+  children: s,
+  className: r,
+  ...m
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: u(t.r, r), role: "status", ...m }, c != null ? /* @__PURE__ */ e.createElement("div", { className: t.i }, c) : null, l != null ? /* @__PURE__ */ e.createElement("h3", { className: t.t }, l) : null, a != null ? /* @__PURE__ */ e.createElement("p", { className: t.d }, a) : null, s, n != null ? /* @__PURE__ */ e.createElement("div", { className: t.a }, n) : null);
+}
+export {
+  v as E
+};

package/dist/EmptyState.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cpr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--empty-state-gap);padding:var(--empty-state-padding);text-align:center;color:var(--empty-state-color)}.cpi{display:flex;margin-bottom:var(--empty-state-icon-gap);color:var(--empty-state-icon-color)}.cpt{margin:0;font-size:var(--empty-state-title-size);font-weight:600;color:var(--empty-state-title-color);line-height:1.3}.cpd{margin:0;max-width:var(--empty-state-max-width);font-size:var(--empty-state-description-size);color:var(--empty-state-description-color);line-height:1.45}.cpa{display:flex;flex-wrap:wrap;gap:var(--empty-state-actions-gap);justify-content:center;margin-top:var(--empty-state-actions-margin-top)}}

package/dist/EmptyState.d.ts

@@ -0,0 +1,2 @@
+export * from './EmptyState/index'
+export {}

package/dist/EmptyState.js

@@ -0,0 +1,4 @@
+import { E as e } from "./EmptyState-mBiWtMIM.js";
+export {
+  e as EmptyState
+};