@dss-kit/ui-kit 1.0.3 → 1.1.0

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;