@jetbrains/kotlin-web-site-ui 4.12.0 → 4.13.0-alpha.1

package/out/components/breakpoints/media.pcss

@@ -1,14 +1,14 @@
-@custom-media --ktl-ms-min (min-width: 375px);
-@custom-media --ktl-mm-min (min-width: 473px);
-@custom-media --ktl-ts-min (min-width: 617px);
-@custom-media --ktl-tm-min (min-width: 809px);
-@custom-media --ktl-tl-min (min-width: 1001px);
-@custom-media --ktl-ds-min (min-width: 1191px);
-@custom-media --ktl-dm-min (min-width: 1281px);
 @custom-media --ktl-ms (max-width: 374px);
 @custom-media --ktl-mm (max-width: 472px);
 @custom-media --ktl-ts (max-width: 616px);
 @custom-media --ktl-tm (max-width: 808px);
 @custom-media --ktl-tl (max-width: 1000px);
 @custom-media --ktl-ds (max-width: 1190px);
-@custom-media --ktl-dm (max-width: 1280px);
+@custom-media --ktl-dm (max-width: 1280px);
+@custom-media --ktl-ms-min (min-width: 375px);
+@custom-media --ktl-mm-min (min-width: 473px);
+@custom-media --ktl-ts-min (min-width: 617px);
+@custom-media --ktl-tm-min (min-width: 809px);
+@custom-media --ktl-tl-min (min-width: 1001px);
+@custom-media --ktl-ds-min (min-width: 1191px);
+@custom-media --ktl-dm-min (min-width: 1281px);

package/out/components/breakpoints-v2/constants.js

@@ -0,0 +1,58 @@
+const BREAKPOINTS = {
+  MS: 472,
+  ML: 616,
+  TM: 808,
+  TL: 1000,
+  DS: 1190
+};
+const BREAKPOINTS_NAMES = Object.freeze(Object.keys(BREAKPOINTS));
+
+function isBreakpointKey(key) {
+  return BREAKPOINTS_NAMES.includes(key);
+} // --- Generate media queries for min <= width <= max ---
+
+
+function generateInMediaItem([name, value], index, list) {
+  if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
+  let result = `width <= ${value}px`;
+
+  if (index > 0) {
+    result = `${list[index - 1][1]}px < ${result}`;
+  }
+
+  return [name, `(${result})`];
+}
+
+const BREAKPOINTS_IN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateInMediaItem)); // --- Generate media queries for width > max ---
+
+function generateMoreMediaItem([name, value]) {
+  if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
+  return [name, `(width > ${value}px)`];
+}
+
+const BREAKPOINTS_MORE_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMoreMediaItem)); // --- Generate media queries for width < min ---
+
+function generateLessMediaItem([name], index, list) {
+  if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
+  if (index === 0) return null;
+  const value = list[index - 1][1];
+  return [name, `(width < ${value}px)`];
+}
+
+const BREAKPOINTS_LESS_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateLessMediaItem).filter(Boolean)); // ===== BACKWARD COMPATIBILITY =====
+// --- Generate media queries for (max-width: max) ---
+
+function generateMaxMediaItem([name, value]) {
+  if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
+  return [name, `(max-width: ${value}px)`];
+}
+
+const BREAKPOINTS_MAX_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMaxMediaItem)); // --- Generate media queries for (max-width: max) ---
+
+function generateMinMediaItem([name, value]) {
+  if (!isBreakpointKey(name)) throw new Error(`Invalid breakpoint name: ${name}`);
+  return [name, `(min-width: ${value + 1}px)`];
+}
+
+const BREAKPOINTS_MIN_MEDIA = Object.fromEntries(Object.entries(BREAKPOINTS).map(generateMinMediaItem));
+export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES };

package/out/components/breakpoints-v2/hooks.js

@@ -0,0 +1,20 @@
+import { useMedia } from 'the-platform/useMedia';
+import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
+
+function useMS() {
+  return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
+}
+
+function useTM() {
+  return useMedia(BREAKPOINTS_MAX_MEDIA.TM, false);
+}
+
+function useTL() {
+  return useMedia(BREAKPOINTS_MAX_MEDIA.TL, false);
+}
+
+function useDS() {
+  return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
+}
+
+export { useDS, useMS, useTL, useTM };

package/out/components/breakpoints-v2/index.js

@@ -0,0 +1,2 @@
+export { BREAKPOINTS, BREAKPOINTS_IN_MEDIA, BREAKPOINTS_LESS_MEDIA, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA, BREAKPOINTS_MORE_MEDIA, BREAKPOINTS_NAMES } from './constants.js';
+export { useDS, useMS, useTL, useTM } from './hooks.js';

package/out/components/breakpoints-v2/media.pcss

@@ -0,0 +1,24 @@
+@custom-media --ktl-ms (max-width: 472px);
+@custom-media --ktl-ml (max-width: 616px);
+@custom-media --ktl-tm (max-width: 808px);
+@custom-media --ktl-tl (max-width: 1000px);
+@custom-media --ktl-ds (max-width: 1190px);
+@custom-media --ktl-ms-min (min-width: 473px);
+@custom-media --ktl-ml-min (min-width: 617px);
+@custom-media --ktl-tm-min (min-width: 809px);
+@custom-media --ktl-tl-min (min-width: 1001px);
+@custom-media --ktl-ds-min (min-width: 1191px);
+@custom-media --ktl-ms-in (width <= 472px);
+@custom-media --ktl-ml-in (472px < width <= 616px);
+@custom-media --ktl-tm-in (616px < width <= 808px);
+@custom-media --ktl-tl-in (808px < width <= 1000px);
+@custom-media --ktl-ds-in (1000px < width <= 1190px);
+@custom-media --ktl-ms-more (width > 472px);
+@custom-media --ktl-ml-more (width > 616px);
+@custom-media --ktl-tm-more (width > 808px);
+@custom-media --ktl-tl-more (width > 1000px);
+@custom-media --ktl-ds-more (width > 1190px);
+@custom-media --ktl-ml-less (width < 472px);
+@custom-media --ktl-tm-less (width < 616px);
+@custom-media --ktl-tl-less (width < 808px);
+@custom-media --ktl-ds-less (width < 1000px);

package/out/components/footer/index.css

@@ -265,7 +265,7 @@
   display: none;
 }
 
-@media (max-width: 808px) {
+@media (width < 616px) {
   .ktl-footer-module_footer_m67Up {
     padding: var(--ktl-box-section-l) 0;
   }
@@ -299,18 +299,18 @@
         --ktl-layout-width: 1144px;
     }
 
-        @media (max-width: 1190px) {.ktl-layout {
+        @media (width < 1000px) {.ktl-layout {
             --ktl-layout-width: 952px;
     }
         }
 
-        @media (max-width: 1000px) {.ktl-layout {
+        @media (width < 808px) {.ktl-layout {
             --ktl-layout-spacing: 48px;
             --ktl-layout-width: 760px;
     }
         }
 
-        @media (max-width: 808px) {.ktl-layout {
+        @media (width < 616px) {.ktl-layout {
             --ktl-layout-width: 568px;
     }
         }
@@ -325,7 +325,7 @@
     }
         }
 
-        @media (max-width: 374px) {.ktl-layout {
+        @media (width > 472px) {.ktl-layout {
             --ktl-layout-width: 272px;
     }
         }

package/out/components/layout/index.css

@@ -3,18 +3,18 @@
         --ktl-layout-width: 1144px;
     }
 
-        @media (max-width: 1190px) {.ktl-layout {
+        @media (width < 1000px) {.ktl-layout {
             --ktl-layout-width: 952px;
     }
         }
 
-        @media (max-width: 1000px) {.ktl-layout {
+        @media (width < 808px) {.ktl-layout {
             --ktl-layout-spacing: 48px;
             --ktl-layout-width: 760px;
     }
         }
 
-        @media (max-width: 808px) {.ktl-layout {
+        @media (width < 616px) {.ktl-layout {
             --ktl-layout-width: 568px;
     }
         }
@@ -29,7 +29,7 @@
     }
         }
 
-        @media (max-width: 374px) {.ktl-layout {
+        @media (width > 472px) {.ktl-layout {
             --ktl-layout-width: 272px;
     }
         }

package/out/components/layout-v2/index.css

@@ -0,0 +1,61 @@
+.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+        --ktl-layout-spacing: 72px;
+        --ktl-layout-width: 1144px;
+    }
+
+        @media (width < 1000px) {.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+            --ktl-layout-width: 952px;
+    }
+        }
+
+        @media (width < 808px) {.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+            --ktl-layout-spacing: 48px;
+            --ktl-layout-width: 760px;
+    }
+        }
+
+        @media (max-width: 616px) {.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+            --ktl-layout-width: 568px;
+    }
+        }
+
+        @media (width < 472px) {.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+            --ktl-layout-width: 424px;
+    }
+        }
+
+        @media (width > 472px) {.ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+            --ktl-layout-width: 312px;
+    }
+        }
+
+        .ktl-layout-v2,
+    .ktl-layout-to-2 .ktl-layout,
+    .ktl-layout-to-2 .ktl-layout {
+
+        box-sizing: border-box;
+        width: var(--ktl-layout-width);
+
+        transition: width 200ms;
+        will-change: width;
+}
+    .ktl-layout--center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .ktl-layout--spacing {
+        margin-top: var(--ktl-layout-spacing);
+        margin-bottom: var(--ktl-layout-spacing);
+    }

package/out/components/layout-v2/index.js

@@ -0,0 +1 @@
+import './index.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jetbrains/kotlin-web-site-ui",
   "description": "UI components for Kotlin web sites development",
-  "version": "4.12.0",
+  "version": "4.13.0-alpha.1",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "files": [