@dubium/icons 0.0.1 → 0.0.2-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,6 @@
1
1
  /**
2
- * Коллекция базовых SVG-иконок.
3
- *
4
- * Экспортирует готовые компоненты иконок и связанные типы.
2
+ * AUTO-GENERATED by scripts/sync-icons.mjs.
3
+ * Do not edit manually.
5
4
  */
6
5
  export type { IIconComponentProps } from "./types.js";
7
6
  export { default as UserIcon } from "./UserIcon.js";
@@ -7,56 +7,56 @@ var s = /* @__PURE__ */ new Map(), c = n(({ name: n, size: c = 24, width: l, hei
7
7
  let { icons: h } = e(), g = i(() => ({
8
8
  ...t,
9
9
  ...h
10
- }), [h]), [_, v] = a(() => s.get(n) || null), [y, b] = a(!1), x = l ?? c, S = u ?? c, C = i(() => ({
10
+ }), [h]), _ = g[n], [v, y] = a(() => _ ? s.get(_) ?? null : null), [b, x] = a(!1), S = l ?? c, C = u ?? c, w = i(() => ({
11
11
  display: "inline-flex",
12
12
  alignItems: "center",
13
13
  justifyContent: "center",
14
- width: x,
15
- height: S,
14
+ width: S,
15
+ height: C,
16
16
  transform: `rotate(${f}deg)`
17
17
  }), [
18
- x,
19
18
  S,
19
+ C,
20
20
  f
21
21
  ]);
22
22
  return r(() => {
23
23
  let e = !1;
24
24
  return (async () => {
25
- let t = String(n), r = s.get(t);
26
- if (r) {
27
- v(() => r);
25
+ let t = String(n), r = g[n];
26
+ if (!r) {
27
+ console.warn(`Иконка "${t}" не найдена`), y(() => null);
28
28
  return;
29
29
  }
30
- let i = g[n];
31
- if (!i) {
32
- console.warn(`Иконка "${t}" не найдена`), v(() => null);
30
+ let i = s.get(r);
31
+ if (i) {
32
+ y(() => i);
33
33
  return;
34
34
  }
35
- b(!0), v(() => null), i().then((n) => {
35
+ x(!0), y(() => null), r().then((t) => {
36
36
  if (e) return;
37
- let r = n.default;
38
- s.set(t, r), v(() => r);
37
+ let n = t.default;
38
+ s.set(r, n), y(() => n);
39
39
  }).catch((n) => {
40
- e || (console.error(`Ошибка загрузки иконки "${t}":`, n), v(() => null));
40
+ e || (console.error(`Ошибка загрузки иконки "${t}":`, n), y(() => null));
41
41
  }).finally(() => {
42
- e || b(!1);
42
+ e || x(!1);
43
43
  });
44
44
  })(), () => {
45
45
  e = !0;
46
46
  };
47
- }, [n, g]), y || !_ ? /* @__PURE__ */ o("div", {
47
+ }, [n, g]), b || !v ? /* @__PURE__ */ o("div", {
48
48
  "aria-hidden": "true",
49
49
  role: "img",
50
50
  style: {
51
- ...C,
51
+ ...w,
52
52
  visibility: "hidden"
53
53
  }
54
54
  }) : /* @__PURE__ */ o("div", {
55
55
  "aria-label": m || n,
56
56
  onClick: p,
57
57
  role: "img",
58
- style: C,
59
- children: _ ? /* @__PURE__ */ o(_, { color: d }) : null
58
+ style: w,
59
+ children: v ? /* @__PURE__ */ o(v, { color: d }) : null
60
60
  });
61
61
  });
62
62
  c.displayName = "Icon";
@@ -1,36 +1,8 @@
1
1
  /**
2
- * Реестр встроенных иконок.
3
- *
4
- * Каждая иконка описывается как функция-лоадер с динамическим `import()`,
5
- * что позволяет:
6
- * - выполнять code-splitting (tree shaking)
7
- * - загружать иконки по требованию (lazy loading)
8
- *
9
- * @example
10
- * ```ts
11
- * const defaultIcons = {
12
- * Close: () => import("../../icons/CloseIcon"),
13
- * };
14
- * ```
15
- *
16
- * @remarks
17
- * - Используется внутри компонента `Icon` как базовый источник иконок
18
- * - Может быть расширен пользовательскими иконками через `IconProvider`
19
- * - Не требует `IconProvider` для работы
2
+ * AUTO-GENERATED by scripts/sync-icons.mjs.
3
+ * Source of truth: src/icons/collection/*Icon.tsx.
20
4
  */
21
5
  export declare const defaultIcons: {
22
- readonly Close: () => Promise<typeof import("../../collection/UserIcon.js")>;
6
+ readonly User: () => Promise<typeof import("../../collection/UserIcon.js")>;
23
7
  };
24
- /**
25
- * Объединение имён всех встроенных иконок.
26
- *
27
- * Используется для:
28
- * - типизации пропа `name` в `Icon`
29
- * - автодополнения (autocomplete) для встроенных иконок
30
- *
31
- * @example
32
- * ```ts
33
- * type TDefaultIconName = "Close";
34
- * ```
35
- */
36
8
  export type TDefaultIconName = keyof typeof defaultIcons;
@@ -1,4 +1,4 @@
1
1
  //#region src/icons/spa/icon/Icon.registry.ts
2
- var e = { Close: () => import("../../collection/UserIcon.js") };
2
+ var e = { User: () => import("../../collection/UserIcon.js") };
3
3
  //#endregion
4
4
  export { e as defaultIcons };
@@ -1,4 +1,5 @@
1
- import type { ComponentType, SVGProps } from "react";
1
+ import type { ComponentType } from "react";
2
+ import type { IIconComponentProps } from "../../collection/types.js";
2
3
  import type { TDefaultIconName } from "./Icon.registry.js";
3
4
  /**
4
5
  * Тип "пустого" реестра иконок.
@@ -9,17 +10,7 @@ import type { TDefaultIconName } from "./Icon.registry.js";
9
10
  * @remarks
10
11
  * Обеспечивает корректную типизацию без ослабления type safety.
11
12
  */
12
- export type TEmptyIconRegistry = Record<string, never>;
13
- /**
14
- * Базовые пропсы для SVG-иконки.
15
- *
16
- * Расширяет стандартные SVG-атрибуты и добавляет поддержку цвета.
17
- *
18
- * @property color - Цвет заливки иконки (обычно прокидывается в `fill`)
19
- */
20
- export interface IIconComponentProps extends SVGProps<SVGSVGElement> {
21
- color?: string;
22
- }
13
+ export type TEmptyIconRegistry = Readonly<Record<never, never>>;
23
14
  /**
24
15
  * Тип React-компонента иконки.
25
16
  *
@@ -77,3 +68,4 @@ export type TIconRegistry = Readonly<Record<string, TIconLoader>>;
77
68
  * ```
78
69
  */
79
70
  export type TIconName<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> = Extract<keyof TCustomIcons, string> | TDefaultIconName;
71
+ export type { IIconComponentProps };
@@ -1,5 +1,5 @@
1
- import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.ts";
2
- import type { IIconContextValue } from "./IconProvider.types.ts";
1
+ import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.js";
2
+ import type { IIconContextValue } from "./IconProvider.types.js";
3
3
  /**
4
4
  * React-контекст для хранения реестра иконок.
5
5
  *
@@ -10,7 +10,7 @@ import type { IIconContextValue } from "./IconProvider.types.ts";
10
10
  * - Значение по умолчанию содержит пустой реестр (`icons: {}`)
11
11
  * - Без `IconProvider` будут доступны только встроенные (`defaultIcons`) иконки
12
12
  */
13
- export declare const IconContext: import("react").Context<IIconContextValue<Readonly<Record<string, import("../index.ts").TIconLoader>>>>;
13
+ export declare const IconContext: import("react").Context<IIconContextValue<Readonly<Record<string, import("../index.js").TIconLoader>>>>;
14
14
  /**
15
15
  * Хук для доступа к `IconContext` с поддержкой типизации кастомных иконок.
16
16
  *
@@ -1,5 +1,5 @@
1
- import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.ts";
2
- import type { IIconProviderProps } from "./IconProvider.types.ts";
1
+ import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.js";
2
+ import type { IIconProviderProps } from "./IconProvider.types.js";
3
3
  /**
4
4
  * Провайдер контекста UI-библиотеки (`IconProvider`).
5
5
  *
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
- import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.ts";
2
+ import type { TEmptyIconRegistry, TIconRegistry } from "../icon/index.js";
3
3
  /**
4
4
  * Значение, хранящееся в React-контексте `IconContext`.
5
5
  *
@@ -0,0 +1,26 @@
1
+ import type { CSSProperties, ReactNode } from "react";
2
+ /**
3
+ * Свойства контейнера SSR/RSC-иконки.
4
+ *
5
+ * @property ariaLabel - Атрибут `aria-label` для доступности
6
+ * @property children - Дочерние элементы (SVG иконки)
7
+ * @property deg - Угол поворота в градусах
8
+ * @property height - Высота контейнера (если нужен прямоугольник)
9
+ * @property size - Размер контейнера (квадратный, по умолчанию 24)
10
+ * @property style - Инлайн-стили контейнера
11
+ * @property width - Ширина контейнера (если нужен прямоугольник)
12
+ */
13
+ export interface IconContainerProps {
14
+ ariaLabel?: string;
15
+ children: ReactNode;
16
+ deg?: number;
17
+ height?: number | string;
18
+ size?: number | string;
19
+ style?: CSSProperties;
20
+ width?: number | string;
21
+ }
22
+ /**
23
+ * Общий SSR/RSC-контейнер иконки.
24
+ * Не использует hooks, context и client-only API.
25
+ */
26
+ export declare const IconContainer: ({ ariaLabel, children, deg, height, size, style, width, }: IconContainerProps) => import("react").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ //#region src/icons/ssr/icon/Icon.container.tsx
3
+ var t = ({ ariaLabel: t, children: n, deg: r = 0, height: i, size: a = 24, style: o, width: s }) => {
4
+ let c = {
5
+ display: "inline-flex",
6
+ alignItems: "center",
7
+ justifyContent: "center",
8
+ flex: "0 0 auto",
9
+ width: s ?? a,
10
+ height: i ?? a,
11
+ transform: `rotate(${r}deg)`,
12
+ ...o
13
+ };
14
+ return /* @__PURE__ */ e("span", {
15
+ "aria-hidden": !t || void 0,
16
+ "aria-label": t,
17
+ role: t ? "img" : void 0,
18
+ style: c,
19
+ children: n
20
+ });
21
+ };
22
+ //#endregion
23
+ export { t as IconContainer };
@@ -1,56 +1,35 @@
1
1
  import type { IconProps, TIconRegistry } from "./Icon.types.js";
2
2
  /**
3
- * Создаёт типизированную обёртку над компонентом `Icon`
4
- * с поддержкой автодополнения (autocomplete) для кастомных иконок.
3
+ * Создаёт Server Component с именами встроенной npm-коллекции и
4
+ * дополнительными иконками конкретного проекта.
5
5
  *
6
- * @typeParam TIcons - Реестр иконок (обычно `typeof appIcons`)
7
- *
8
- * @returns Компонент иконки с типобезопасным пропом `name`,
9
- * включающим все иконки из переданного реестра.
6
+ * Registry захватывается обычным замыканием: React Context и `use client`
7
+ * для SSR/RSC не нужны.
10
8
  *
11
9
  * @example
12
10
  * ```tsx
13
- * const appIcons = defineIcons({
14
- * User: UserIcon,
15
- * Settings: SettingsIcon,
16
- * });
11
+ * import BrandIcon from "./BrandIcon"
12
+ * import { createIcon, defineIcons } from "@dubium/icons/ssr"
17
13
  *
18
- * const AppIcon = createIcon<typeof appIcons>();
14
+ * const projectIcons = defineIcons({ Brand: BrandIcon })
15
+ * export const AppIcon = createIcon(projectIcons)
19
16
  *
20
- * <IconProvider icons={appIcons}>
21
- * <AppIcon name="User" /> // ✅ autocomplete
22
- * <AppIcon name="Wrong" /> // ❌ ошибка TypeScript
23
- * </IconProvider>
17
+ * <AppIcon name="User" />
18
+ * <AppIcon name="Brand" />
24
19
  * ```
25
- *
26
- * @remarks
27
- * - В отличие от SPA-версии, иконки передаются синхронно (без `import()`)
28
- * - Требует использования `IconProvider` для передачи реестра иконок в runtime
29
20
  */
30
- export declare const createIcon: <TIcons extends TIconRegistry>() => {
31
- (props: IconProps<TIcons>): import("react").JSX.Element;
21
+ export declare const createIcon: <const TCustomIcons extends TIconRegistry>(icons: TCustomIcons) => {
22
+ (props: IconProps<TCustomIcons>): Promise<import("react").JSX.Element | null>;
32
23
  displayName: string;
33
24
  };
34
25
  /**
35
- * Помогает вывести точный тип реестра иконок для серверного рендеринга.
36
- *
37
- * Используется вместе с `createIcon`, чтобы TypeScript сохранил
38
- * конкретные имена иконок в типе вместо общего `string`.
39
- *
40
- * @typeParam TIcons - Реестр иконок (выводится автоматически)
26
+ * Сохраняет literal-ключи пользовательского registry.
41
27
  *
42
- * @param icons - Реестр иконок с синхронными React-компонентами
28
+ * Позволяет передать реестр иконок без потери точности типов
29
+ * (`const`-type parameters сохраняют строковые литералы ключей).
43
30
  *
44
- * @returns Тот же реестр иконок с неизменённым (точным) типом
45
- *
46
- * @example
47
- * ```ts
48
- * const appIcons = defineIcons({
49
- * User: UserIcon,
50
- * Close: CloseIcon,
51
- * });
52
- *
53
- * // typeof appIcons → { User: typeof UserIcon; Close: typeof CloseIcon }
54
- * ```
31
+ * @typeParam TIcons - Тип реестра пользовательских иконок
32
+ * @param icons - Реестр иконок проекта.
33
+ * @returns Тот же реестр иконок с сохранёнными literal-типами.
55
34
  */
56
35
  export declare const defineIcons: <const TIcons extends TIconRegistry>(icons: TIcons) => TIcons;
@@ -1,9 +1,8 @@
1
- import { Icon as e } from "./Icon.js";
2
- import { jsx as t } from "react/jsx-runtime";
1
+ import { renderIconWithRegistry as e } from "./Icon.js";
3
2
  //#region src/icons/ssr/icon/Icon.create.tsx
4
- var n = () => {
5
- let n = (n) => /* @__PURE__ */ t(e, { ...n });
3
+ var t = (t) => {
4
+ let n = (n) => e(n, t);
6
5
  return n.displayName = "SSRIcon", n;
7
- }, r = (e) => e;
6
+ }, n = (e) => e;
8
7
  //#endregion
9
- export { n as createIcon, r as defineIcons };
8
+ export { t as createIcon, n as defineIcons };
@@ -1,33 +1,6 @@
1
- import type { IconProps, TIconRegistry } from "./Icon.types.js";
1
+ import type { IconProps } from "./Icon.types.js";
2
2
  /**
3
- * Компонент иконки для серверного рендеринга (SSR).
4
- *
5
- * Иконка загружается синхронно из реестра, переданного через `IconProvider`,
6
- * без динамических импортов, что корректно работает на сервере.
7
- *
8
- * @typeParam TIcons - Тип реестра иконок
9
- *
10
- * @param props - Свойства компонента иконки
11
- * @param props.name - Имя иконки для отображения
12
- * @param props.size - Размер иконки в пикселях (по умолчанию 24)
13
- * @param props.width - Ширина иконки (если нужен прямоугольник)
14
- * @param props.height - Высота иконки (если нужен прямоугольник)
15
- * @param props.color - Цвет иконки (по умолчанию "currentColor")
16
- * @param props.deg - Угол поворота иконки в градусах (по умолчанию 0)
17
- * @param props.onClick - Обработчик клика по иконке
18
- * @param props.ariaLabel - Атрибут `aria-label` для доступности
19
- * @param props.style - Дополнительные CSS-стили контейнера
20
- *
21
- * @example
22
- * ```tsx
23
- * <Icon name="Arrow" size={32} color="blue" deg={90} />
24
- * ```
25
- *
26
- * @remarks
27
- * - Если иконка не найдена в реестре, выводится предупреждение и `null`
28
- * - Контейнер рендерится как `<span>` с `inline-flex` для центрирования
29
- * - При указании `ariaLabel` контейнер становится видимым для скринридера (`role="img"`)
30
- *
31
- * @returns React-элемент иконки
3
+ * Server Component для встроенной npm-коллекции.
4
+ * Не использует hooks/context и не требует `use client`.
32
5
  */
33
- export declare const Icon: <TIcons extends TIconRegistry = TIconRegistry>({ name, size, width, height, color, deg, onClick, ariaLabel, style, }: IconProps<TIcons>) => import("react").JSX.Element | null;
6
+ export declare const Icon: (props: IconProps) => Promise<import("react").JSX.Element | null>;
@@ -1,31 +1,26 @@
1
- import { useIconRegistry as e } from "../provider/useIconRegistry.js";
2
- import { jsx as t } from "react/jsx-runtime";
1
+ import { defaultIcons as e } from "./Icon.registry.js";
2
+ import { IconContainer as t } from "./Icon.container.js";
3
+ import { jsx as n } from "react/jsx-runtime";
3
4
  //#region src/icons/ssr/icon/Icon.tsx
4
- var n = ({ name: n, size: r = 24, width: i, height: a, color: o = "currentColor", deg: s = 0, onClick: c, ariaLabel: l, style: u }) => {
5
- let d = e()[String(n)];
6
- if (!d) return console.warn(`Иконка "${String(n)}" не найдена`), null;
7
- let f = {
8
- display: "inline-flex",
9
- alignItems: "center",
10
- justifyContent: "center",
11
- flex: "0 0 auto",
12
- width: i ?? r,
13
- height: a ?? r,
14
- transform: `rotate(${s}deg)`,
15
- ...u
16
- };
17
- return /* @__PURE__ */ t("span", {
18
- "aria-hidden": !l || void 0,
19
- "aria-label": l,
20
- onClick: c,
21
- role: l ? "img" : void 0,
22
- style: f,
23
- children: /* @__PURE__ */ t(d, {
5
+ var r = (e, t) => Object.prototype.hasOwnProperty.call(e, t), i = async (t) => {
6
+ if (!r(e, t)) return null;
7
+ let n = e[t];
8
+ return (await n()).default;
9
+ }, a = async (e, a) => {
10
+ let { name: o, size: s = 24, width: c, height: l, color: u = "currentColor", deg: d = 0, ariaLabel: f, style: p } = e, m = String(o), h = (a && r(a, m) ? a[m] : void 0) ?? await i(m);
11
+ return h ? /* @__PURE__ */ n(t, {
12
+ ariaLabel: f,
13
+ deg: d,
14
+ height: l,
15
+ size: s,
16
+ style: p,
17
+ width: c,
18
+ children: /* @__PURE__ */ n(h, {
24
19
  "aria-hidden": "true",
25
- color: o,
20
+ color: u,
26
21
  focusable: "false"
27
22
  })
28
- });
29
- };
23
+ }) : (console.warn(`Иконка "${m}" не найдена`), null);
24
+ }, o = (e) => a(e), s = a;
30
25
  //#endregion
31
- export { n as Icon };
26
+ export { o as Icon, s as renderIconWithRegistry };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * AUTO-GENERATED by scripts/sync-icons.mjs.
3
+ * Source of truth: src/icons/collection/*Icon.tsx.
4
+ */
5
+ export declare const defaultIcons: {
6
+ readonly User: () => Promise<typeof import("../../collection/UserIcon.js")>;
7
+ };
8
+ export type TDefaultIconName = keyof typeof defaultIcons;
@@ -0,0 +1,4 @@
1
+ //#region src/icons/ssr/icon/Icon.registry.ts
2
+ var e = { User: () => import("../../collection/UserIcon.js") };
3
+ //#endregion
4
+ export { e as defaultIcons };
@@ -1,58 +1,64 @@
1
- import type { ComponentType, CSSProperties, MouseEventHandler, SVGProps } from "react";
1
+ import type { ComponentType, CSSProperties } from "react";
2
+ import type { IIconComponentProps } from "../../collection/types.js";
3
+ import type { TDefaultIconName } from "./Icon.registry.js";
2
4
  /**
3
- * Базовые пропсы для SVG-иконки.
5
+ * React-компонент SVG-иконки.
4
6
  *
5
- * Расширяет стандартные SVG-атрибуты и добавляет поддержку цвета.
7
+ * Принимает пропсы {@link IIconComponentProps} для настройки атрибутов и цвета.
8
+ */
9
+ export type TIcon = ComponentType<IIconComponentProps>;
10
+ /**
11
+ * Модуль отдельной иконки, загружаемый сервером.
6
12
  *
7
- * @property color - Цвет заливки иконки (обычно прокидывается в `fill`)
13
+ * @property default - React-компонент иконки
8
14
  */
9
- export interface IIconComponentProps extends SVGProps<SVGSVGElement> {
10
- color?: string;
11
- }
15
+ export type TIconModule = {
16
+ default: TIcon;
17
+ };
12
18
  /**
13
- * Тип React-компонента иконки.
19
+ * Lazy loader встроенной иконки.
20
+ *
21
+ * Выполняет асинхронную загрузку модуля иконки через динамический `import()`.
14
22
  *
15
- * Каждая иконка должна быть функциональным компонентом,
16
- * принимающим `IIconComponentProps`.
23
+ * @returns Промис с модулем иконки
17
24
  */
18
- export type TIcon = ComponentType<IIconComponentProps>;
25
+ export type TIconLoader = () => Promise<TIconModule>;
19
26
  /**
20
- * Реестр иконок для серверного рендеринга (SSR).
27
+ * Реестр lazy loader-ов, генерируемый из npm-коллекции.
21
28
  *
22
- * В отличие от SPA-версии, здесь иконки хранятся как уже готовые
23
- * React-компоненты (синхронно), а не как функции-лоадеры с `import()`.
29
+ * Ключ имя иконки, значение функция её асинхронной загрузки.
30
+ */
31
+ export type TIconLoaderRegistry = Readonly<Record<string, TIconLoader>>;
32
+ /**
33
+ * Синхронный реестр пользовательских иконок проекта.
24
34
  *
25
- * @example
26
- * ```ts
27
- * const icons: TIconRegistry = {
28
- * Close: CloseIcon,
29
- * User: UserIcon,
30
- * };
31
- * ```
35
+ * Ключ — имя иконки, значение — готовый React-компонент без ленивой загрузки.
32
36
  */
33
37
  export type TIconRegistry = Readonly<Record<string, TIcon>>;
34
38
  /**
35
- * Тип допустимых имён иконок.
36
- *
37
- * Ограничивает проп `name` в `Icon` строго ключами переданного реестра.
39
+ * Пустой registry без расширения `keyof` до `string`.
38
40
  *
39
- * @typeParam TIcons - Реестр иконок
41
+ * Используется как значение по умолчанию в generic-параметрах для сохранения
42
+ * строгой типизации.
43
+ */
44
+ export type TEmptyIconRegistry = Readonly<Record<never, never>>;
45
+ /**
46
+ * Встроенные npm-иконки + иконки, добавленные через `createIcon()`.
40
47
  *
41
- * @example
42
- * ```ts
43
- * type Name = TIconName<typeof appIcons>;
44
- * // "Close" | "User"
45
- * ```
48
+ * @typeParam TCustomIcons - Реестр пользовательских иконок проекта
46
49
  */
47
- export type TIconName<TIcons extends TIconRegistry = TIconRegistry> = Extract<keyof TIcons, string>;
50
+ export type TIconName<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> = TDefaultIconName | Extract<keyof TCustomIcons, string>;
48
51
  /**
49
- * Свойства компонента иконки для серверного рендеринга (SSR).
52
+ * Props SSR/RSC-компонента иконки.
50
53
  *
51
- * @template TIcons - Тип реестра иконок
54
+ * Интерактивные handlers намеренно отсутствуют, так как серверные
55
+ * компоненты не обрабатывают события на клиенте.
56
+ *
57
+ * @typeParam TCustomIcons - Реестр пользовательских иконок проекта
52
58
  */
53
- export interface IconProps<TIcons extends TIconRegistry = TIconRegistry> {
59
+ export interface IconProps<TCustomIcons extends TIconRegistry = TEmptyIconRegistry> {
54
60
  /**
55
- * Атрибут aria-label (делает иконку доступной для скринридера)
61
+ * Атрибут `aria-label` для доступности
56
62
  */
57
63
  ariaLabel?: string;
58
64
  /**
@@ -64,27 +70,24 @@ export interface IconProps<TIcons extends TIconRegistry = TIconRegistry> {
64
70
  */
65
71
  deg?: number;
66
72
  /**
67
- * Высота (если нужен прямоугольник)
73
+ * Высота иконки (если нужен прямоугольник)
68
74
  */
69
75
  height?: number | string;
70
76
  /**
71
77
  * Имя иконки
72
78
  */
73
- name: TIconName<TIcons>;
74
- /**
75
- * Обработчик клика по контейнеру иконки
76
- */
77
- onClick?: MouseEventHandler<HTMLSpanElement>;
79
+ name: TIconName<TCustomIcons>;
78
80
  /**
79
- * Приоритетный размер (квадратный)
81
+ * Размер иконки (квадратный, по умолчанию 24)
80
82
  */
81
83
  size?: number | string;
82
84
  /**
83
- * Дополнительные CSS-стили контейнера
85
+ * Инлайн-стили контейнера
84
86
  */
85
87
  style?: CSSProperties;
86
88
  /**
87
- * Ширина (если нужен прямоугольник)
89
+ * Ширина иконки (если нужен прямоугольник)
88
90
  */
89
91
  width?: number | string;
90
92
  }
93
+ export type { IIconComponentProps };
@@ -1,9 +1,10 @@
1
1
  /**
2
- * Публичный API модуля иконок для серверного рендеринга (SSR).
2
+ * Публичный API модуля иконок для SSR/RSC.
3
3
  *
4
- * Экспортирует компонент `Icon`, фабрику `createIcon`, хелпер `defineIcons`
5
- * и связанные типы.
4
+ * Экспортирует компонент `Icon`, контейнер `IconContainer`, фабрику `createIcon`
5
+ * и связанные типы для серверного рендеринга без React Context и `use client`.
6
6
  */
7
7
  export { Icon } from "./Icon.js";
8
+ export { IconContainer, type IconContainerProps } from "./Icon.container.js";
8
9
  export { createIcon, defineIcons } from "./Icon.create.js";
9
- export type { IIconComponentProps, TIcon, TIconRegistry, IconProps, TIconName } from "./Icon.types.js";
10
+ export type { IconProps, IIconComponentProps, TEmptyIconRegistry, TIcon, TIconLoader, TIconLoaderRegistry, TIconModule, TIconName, TIconRegistry, } from "./Icon.types.js";
@@ -1,8 +1,6 @@
1
1
  /**
2
- * Публичный API пакета иконок для серверного рендеринга (SSR).
2
+ * React Server Components / SSR API.
3
3
  *
4
- * Позволяет отображать иконки синхронно на сервере и клиенте
5
- * без динамических импортов.
4
+ * Здесь намеренно нет React Context, hooks и `use client` boundary.
6
5
  */
7
- export { Icon, createIcon, defineIcons, type IconProps, type IIconComponentProps, type TIcon, type TIconName, type TIconRegistry, } from "./icon/index.js";
8
- export { IconProvider, useIconRegistry, type IIconProviderProps } from "./provider/index.js";
6
+ export { Icon, IconContainer, createIcon, defineIcons, type IconContainerProps, type IconProps, type IIconComponentProps, type TEmptyIconRegistry, type TIcon, type TIconLoader, type TIconLoaderRegistry, type TIconModule, type TIconName, type TIconRegistry, } from "./icon/index.js";
package/dist/ssr/index.js CHANGED
@@ -1,5 +1,4 @@
1
- import { useIconRegistry as e } from "./provider/useIconRegistry.js";
1
+ import { IconContainer as e } from "./icon/Icon.container.js";
2
2
  import { Icon as t } from "./icon/Icon.js";
3
3
  import { createIcon as n, defineIcons as r } from "./icon/Icon.create.js";
4
- import { IconProvider as i } from "./provider/IconProvider.js";
5
- export { t as Icon, i as IconProvider, n as createIcon, r as defineIcons, e as useIconRegistry };
4
+ export { t as Icon, e as IconContainer, n as createIcon, r as defineIcons };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dubium/icons",
3
- "version": "0.0.1",
3
+ "version": "0.0.2-alpha.1",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist"
@@ -1,7 +0,0 @@
1
- /**
2
- * React-контекст для хранения реестра иконок при серверном рендеринге (SSR).
3
- *
4
- * Значение по умолчанию — пустой реестр. Фактический реестр иконок
5
- * передаётся через `IconProvider`.
6
- */
7
- export declare const IconRegistryContext: import("react").Context<Readonly<Record<string, import("../index.js").TIcon>>>;
@@ -1,5 +0,0 @@
1
- import { createContext as e } from "react";
2
- //#region src/icons/ssr/provider/IconProvider.context.ts
3
- var t = e({});
4
- //#endregion
5
- export { t as IconRegistryContext };
@@ -1,33 +0,0 @@
1
- import type { TIconRegistry } from "../icon/Icon.types.js";
2
- import type { IIconProviderProps } from "./IconProvider.types.js";
3
- /**
4
- * Провайдер реестра иконок для серверного рендеринга (SSR).
5
- *
6
- * Передаёт реестр синхронных иконок вниз по дереву компонентов
7
- * через `IconRegistryContext`, объединяя его с родительским реестром.
8
- *
9
- * @typeParam TIcons - Тип реестра иконок
10
- *
11
- * @param props - Свойства провайдера
12
- * @param props.children - Дочерние React-элементы
13
- * @param props.icons - Реестр иконок (синхронные React-компоненты)
14
- *
15
- * @returns Провайдер контекста с доступом к иконкам
16
- *
17
- * @example
18
- * ```tsx
19
- * const appIcons = defineIcons({
20
- * User: UserIcon,
21
- * });
22
- *
23
- * <IconProvider icons={appIcons}>
24
- * <App />
25
- * </IconProvider>
26
- * ```
27
- *
28
- * @remarks
29
- * - Позволяет вкладывать провайдеры: дочерний реестр наследует родительский
30
- * - При совпадении имён иконки дочернего провайдера переопределяют родительские
31
- * - Использует `useMemo` для предотвращения лишних перерисовок
32
- */
33
- export declare const IconProvider: <TIcons extends TIconRegistry>({ children, icons }: IIconProviderProps<TIcons>) => import("react").JSX.Element;
@@ -1,16 +0,0 @@
1
- import { IconRegistryContext as e } from "./IconProvider.context.js";
2
- import { useContext as t, useMemo as n } from "react";
3
- import { jsx as r } from "react/jsx-runtime";
4
- //#region src/icons/ssr/provider/IconProvider.tsx
5
- var i = ({ children: i, icons: a }) => {
6
- let o = t(e), s = n(() => ({
7
- ...o,
8
- ...a
9
- }), [o, a]);
10
- return /* @__PURE__ */ r(e, {
11
- value: s,
12
- children: i
13
- });
14
- };
15
- //#endregion
16
- export { i as IconProvider };
@@ -1,13 +0,0 @@
1
- import type { ReactNode } from "react";
2
- import type { TIconRegistry } from "../icon/Icon.types.js";
3
- /**
4
- * Свойства компонента `IconProvider` для серверного рендеринга (SSR).
5
- *
6
- * @template TIcons - Тип реестра иконок
7
- */
8
- export interface IIconProviderProps<TIcons extends TIconRegistry = TIconRegistry> {
9
- /** Дочерние React-элементы, которые получат доступ к реестру иконок */
10
- children: ReactNode;
11
- /** Реестр иконок (синхронные React-компоненты) */
12
- icons: TIcons;
13
- }
@@ -1,8 +0,0 @@
1
- /**
2
- * Публичный API модуля провайдера иконок для серверного рендеринга (SSR).
3
- *
4
- * Экспортирует `IconProvider`, хук `useIconRegistry` и связанные типы.
5
- */
6
- export { IconProvider } from "./IconProvider.js";
7
- export { useIconRegistry } from "./useIconRegistry.js";
8
- export type { IIconProviderProps } from "./IconProvider.types.js";
@@ -1,18 +0,0 @@
1
- import type { TIconRegistry } from "../icon/Icon.types.js";
2
- /**
3
- * Хук для доступа к реестру иконок при серверном рендеринге (SSR).
4
- *
5
- * Возвращает текущий реестр иконок из `IconRegistryContext`.
6
- *
7
- * @returns Реестр иконок, переданный через `IconProvider`
8
- *
9
- * @example
10
- * ```ts
11
- * const registry = useIconRegistry();
12
- * ```
13
- *
14
- * @remarks
15
- * - Без `IconProvider` вернёт пустой реестр `{}`
16
- * - Используется внутри компонента `Icon` для поиска иконки по имени
17
- */
18
- export declare const useIconRegistry: () => TIconRegistry;
@@ -1,6 +0,0 @@
1
- import { IconRegistryContext as e } from "./IconProvider.context.js";
2
- import { useContext as t } from "react";
3
- //#region src/icons/ssr/provider/useIconRegistry.ts
4
- var n = () => t(e);
5
- //#endregion
6
- export { n as useIconRegistry };