npm - sixseconds-modules - Versions diffs - 3.0.16 → 3.0.18 - Mend

sixseconds-modules 3.0.16 → 3.0.18

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.

Files changed (10) hide show

package/dist/components/common/CriticalStyles.d.ts +9 -0
package/dist/components/common/icons.d.ts +1 -0
package/dist/components/common/index.d.ts +1 -0
package/dist/index.cjs.js +99 -30
package/dist/index.cjs.js.map +1 -1
package/dist/index.es.js +99 -30
package/dist/index.es.js.map +1 -1
package/dist/styles/critical.d.ts +26 -0
package/dist/utils/validation.d.ts +9 -0
package/package.json +1 -1

package/dist/styles/critical.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Boot-time ("critical") CSS for the header shell.
+ *
+ * WHY THIS EXISTS
+ * The package stylesheet is injected by JS (vite-plugin-css-injected-by-js), so
+ * in an SSR host (Next.js) the server-rendered header HTML paints BEFORE the
+ * bundle runs and adds the <style> to <head>. For that one frame the header is
+ * completely unstyled: the logo stretches to the full viewport width, the icons
+ * stack vertically, and the small (mobile) logo shows next to the full one.
+ * Rendering these rules inline — as part of the same HTML that carries the
+ * header markup — means the very first paint is already correct.
+ *
+ * WHY `:where()`
+ * Every selector is wrapped in `:where()`, which makes its specificity (0,0,0).
+ * This <style> sits in the body, i.e. AFTER the injected stylesheet in document
+ * order, so with plain `.ssh-*` selectors it would out-cascade the real rules
+ * forever. At zero specificity it only ever fills gaps: the moment index.css
+ * arrives, index.css wins. Keep the values here in sync with index.css — this is
+ * the same styling, just available earlier.
+ *
+ * The Inter `@import` is repeated from index.css on purpose: it starts the font
+ * request while the HTML is still parsing instead of after the bundle runs, so
+ * the header does not re-flow from the fallback face a moment later. The second
+ * request (from index.css) is served from cache.
+ */
+export declare const HEADER_CRITICAL_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\");\n:where(.ssh-header){box-sizing:border-box;position:fixed;top:0;right:0;left:0;height:64px;width:100%;display:flex;align-items:center;background:#fff;color:#1a1c1e;border-bottom:1px solid #e0e0e0;z-index:1000;font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;text-align:left}\n:where(.ssh-header) *{box-sizing:border-box}\n:where(.ssh-header__inner){width:100%;max-width:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}\n:where(.ssh-header__left),:where(.ssh-header__center),:where(.ssh-header__right){display:flex;align-items:center}\n:where(.ssh-header__left){gap:8px}\n:where(.ssh-header__right){gap:4px;margin:10px 0}\n:where(.ssh-header__actions){display:flex;align-items:center;justify-content:center;gap:8px}\n:where(.ssh-logo){display:flex;align-items:center;cursor:pointer}\n:where(.ssh-logo--full){width:200px;max-width:200px}\n:where(.ssh-logo--full) svg,:where(.ssh-logo--small) svg{height:40px;width:auto;max-width:100%}\n:where(.ssh-logo--small){display:none}\n:where(.ssh-icon-trigger){display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px;border:0;border-radius:8px;background:transparent;color:#808080}\n:where(.ssh-icon-trigger) svg{width:32px;height:32px}\n:where(.ssh-lang-trigger){display:flex;align-items:center;justify-content:center;gap:5px;padding:4px;border:0;background:transparent;color:#777}\n:where(.ssh-lang-trigger__flag){width:40px;height:auto;aspect-ratio:3/2;object-fit:fill}\n:where(.ssh-avatar){display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#ccc;font-size:14px;font-weight:600;flex-shrink:0}\n:where(.ssh-avatar) img{width:100%;height:100%;object-fit:cover}\n:where(.ssh-profile){position:relative}\n:where(.ssh-profile__trigger){display:flex;align-items:center;gap:2px;border:0;background:transparent}\n:where(.ssh-nav){display:flex}\n:where(.ssh-menu){display:flex;list-style:none;margin:0;padding:0}\n:where(.ssh-badge){position:relative;display:inline-flex}\n:where(.ssh-badge__count){position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d32f2f;color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}\n@media (max-width:1324px){:where(.ssh-nav--desktop){display:none}}\n@media (min-width:1325px){:where(.ssh-hamburger){display:none}}\n@media (max-width:600px){:where(.ssh-header__inner){padding:0 12px}:where(.ssh-logo--full){display:none}:where(.ssh-logo--small){display:flex}}\n";

package/dist/utils/validation.d.ts CHANGED Viewed

@@ -1,4 +1,13 @@
 import { t } from '../types';
+/**
+ * The same requirements as `PASSWORD_REGEX` + `.min(8)`, split up so a form can
+ * tick them off as the user types. Kept here so the checklist and the schema
+ * can never drift apart.
+ */
+export declare const PASSWORD_RULES: {
+    label: string;
+    test: (v: string) => boolean;
+}[];
 export declare const commonUtil: (t: t) => {
     password: import('yup').StringSchema<string | undefined, import('yup').AnyObject, undefined, "">;
     confirmPass: import('yup').StringSchema<string | undefined, import('yup').AnyObject, undefined, "">;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "sixseconds-modules",
-  "version": "3.0.16",
+  "version": "3.0.18",
   "description": "SixSeconds common Header and UI, styled with raw namespaced CSS (no MUI) so it never collides with or inherits the host application's styles.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",