@dss-kit/ui-kit 1.0.4 → 1.1.0

package/dist/providers/MotionProvider/MotionProvider.types.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export interface IMotionProviderProps extends PropsWithChildren {
+    /**
+     * Бросать ошибку, если внутри провайдера отрендерен `motion.*` вместо `m.*`
+     * (только в dev). `motion.*` тянет все фичи Motion во вход приложения.
+     *
+     * Строгость распространяется на всё поддерево, включая children,
+     * переданные потребителем, поэтому компоненты UI Kit её не включают.
+     * @default false
+     */
+    strict?: boolean;
+}

package/dist/providers/MotionProvider/features.d.ts

@@ -0,0 +1 @@
+export { domMax as default } from 'framer-motion';

package/dist/providers/MotionProvider/features.js

@@ -0,0 +1,4 @@
+import { domMax as d } from "framer-motion";
+export {
+  d as default
+};

package/dist/providers/MotionProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MotionProvider';
+export type * from './MotionProvider.types';

package/dist/providers/MotionProvider/loadMotionFeatures.d.ts

@@ -0,0 +1,13 @@
+import { FeatureBundle } from 'framer-motion';
+/** Фичи Motion, если чанк уже загружен, иначе `undefined`. */
+export declare const getLoadedMotionFeatures: () => FeatureBundle | undefined;
+/**
+ * Загружает фичи Motion одним запросом на всё приложение.
+ *
+ * LazyMotion не обрабатывает ошибку загрузки, поэтому при сбое отдаём пустой
+ * бандл: компоненты остаются статичными, а не сыплют необработанным rejection
+ * из каждого провайдера. Промис при этом сбрасывается, и следующий
+ * смонтированный провайдер попробует ещё раз, если браузер не закэшировал
+ * неудачный импорт.
+ */
+export declare const loadMotionFeatures: () => Promise<FeatureBundle>;

package/dist/providers/MotionProvider/loadMotionFeatures.js

@@ -0,0 +1,9 @@
+let o, t;
+const r = () => o, n = () => (t || (t = import("./features.js").then(
+  (e) => (o = e.default, e.default),
+  (e) => (t = void 0, console.error("[ui-kit] Не удалось загрузить фичи Motion:", e), {})
+)), t);
+export {
+  r as getLoadedMotionFeatures,
+  n as loadMotionFeatures
+};

package/dist/providers/index.d.ts

@@ -1 +1,2 @@
+export * from './MotionProvider';
 export * from './ThemeProviderScoped';

package/dist/styles/utils/breakpoints.d.ts

@@ -11,3 +11,15 @@ export declare const bp: {
     readonly bp1440: (direction?: BreakpointDirection) => string;
     readonly bp1920: (direction?: BreakpointDirection) => string;
 };
+/**
+ * Брейкпоинты `bp` для контейнерных запросов: ориентир — ширина ближайшего
+ * предка с `container-name: <name>`, а не окна. Смысл `direction` тот же:
+ * `max` — уже брейкпоинта, `min` — от него и шире.
+ */
+export declare const bpContainer: {
+    readonly xs: (name: string, direction?: BreakpointDirection) => string;
+    readonly sm: (name: string, direction?: BreakpointDirection) => string;
+    readonly md: (name: string, direction?: BreakpointDirection) => string;
+    readonly lg: (name: string, direction?: BreakpointDirection) => string;
+    readonly xl: (name: string, direction?: BreakpointDirection) => string;
+};

package/dist/styles/utils/breakpoints.js

@@ -1,16 +1,23 @@
-import { BreakpointsBase as x, Breakpoints as p } from "../../utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
-const a = (m, i = "max") => i === "min" ? `@media (min-width: ${m}px)` : `@media (max-width: ${m - 1}px)`, r = {
-  xs: (m = "max") => a(p.xs, m),
-  sm: (m = "max") => a(p.sm, m),
-  md: (m = "max") => a(p.md, m),
-  lg: (m = "max") => a(p.lg, m),
-  xl: (m = "max") => a(p.xl, m),
-  bp375: (m = "max") => a(x._375, m),
-  bp1024: (m = "max") => a(x._1024, m),
-  bp1280: (m = "max") => a(x._1280, m),
-  bp1440: (m = "max") => a(x._1440, m),
-  bp1920: (m = "max") => a(x._1920, m)
+import { BreakpointsBase as t, Breakpoints as n } from "../../utils/hooks/breakpoints/useBreakpoint/useBreakpoint.const.js";
+const a = (m, x = "max") => x === "min" ? `@media (min-width: ${m}px)` : `@media (max-width: ${m - 1}px)`, o = {
+  xs: (m = "max") => a(n.xs, m),
+  sm: (m = "max") => a(n.sm, m),
+  md: (m = "max") => a(n.md, m),
+  lg: (m = "max") => a(n.lg, m),
+  xl: (m = "max") => a(n.xl, m),
+  bp375: (m = "max") => a(t._375, m),
+  bp1024: (m = "max") => a(t._1024, m),
+  bp1280: (m = "max") => a(t._1280, m),
+  bp1440: (m = "max") => a(t._1440, m),
+  bp1920: (m = "max") => a(t._1920, m)
+}, i = (m, x, r = "max") => r === "min" ? `@container ${m} (width >= ${x}px)` : `@container ${m} (width < ${x}px)`, p = {
+  xs: (m, x = "max") => i(m, n.xs, x),
+  sm: (m, x = "max") => i(m, n.sm, x),
+  md: (m, x = "max") => i(m, n.md, x),
+  lg: (m, x = "max") => i(m, n.lg, x),
+  xl: (m, x = "max") => i(m, n.xl, x)
 };
 export {
-  r as bp
+  o as bp,
+  p as bpContainer
 };

package/dist/styles/utils/breakpoints.ts

@@ -33,3 +33,35 @@ export const bp = {
   bp1920: (direction: BreakpointDirection = "max") =>
     breakpoint(BreakpointsBase._1920, direction),
 } as const;
+
+// Ширина контейнера бывает дробной (проценты, flex), и пара max-width: 575px /
+// min-width: 576px оставляет щель, в которую не попадает ни одно правило.
+// Синтаксис диапазонов щели не оставляет, и его понимают все браузеры с @container
+const containerBreakpoint = (
+  name: string,
+  px: number,
+  direction: BreakpointDirection = "max"
+): string => {
+  if (direction === "min") {
+    return `@container ${name} (width >= ${px}px)`;
+  }
+  return `@container ${name} (width < ${px}px)`;
+};
+
+/**
+ * Брейкпоинты `bp` для контейнерных запросов: ориентир — ширина ближайшего
+ * предка с `container-name: <name>`, а не окна. Смысл `direction` тот же:
+ * `max` — уже брейкпоинта, `min` — от него и шире.
+ */
+export const bpContainer = {
+  xs: (name: string, direction: BreakpointDirection = "max") =>
+    containerBreakpoint(name, Breakpoints.xs, direction),
+  sm: (name: string, direction: BreakpointDirection = "max") =>
+    containerBreakpoint(name, Breakpoints.sm, direction),
+  md: (name: string, direction: BreakpointDirection = "max") =>
+    containerBreakpoint(name, Breakpoints.md, direction),
+  lg: (name: string, direction: BreakpointDirection = "max") =>
+    containerBreakpoint(name, Breakpoints.lg, direction),
+  xl: (name: string, direction: BreakpointDirection = "max") =>
+    containerBreakpoint(name, Breakpoints.xl, direction),
+} as const;