@dnanpm/styleguide 4.0.0 → 4.0.2

package/build/es/themes/themeComponents/layout.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Page layout constants for consistent sizing across the design system.
+ *
+ * All values are numbers in pixels. Add 'px' suffix when used in CSS.
+ *
+ * @example
+ *     const Container = styled.div`
+ *       max-width: ${theme.layout.content.maxWidth.wide}px; // 1200px
+ *       margin: 0 auto;
+ *     `;
+ */
+declare const layout: {
+    /** Page-level layout constraints */
+    readonly page: {
+        /** Minimum page width: 320px */
+        readonly minWidth: 320;
+        /** Maximum page width: 2560px */
+        readonly maxWidth: 2560;
+    };
+    /** Content area layout constraints */
+    readonly content: {
+        /** Content max-width values (pure content area without padding) */
+        readonly maxWidth: {
+            /** Wide/Normal content: 1200px */
+            readonly wide: 1200;
+            /** Medium content: 860px */
+            readonly medium: 860;
+            /** Narrow/Small content: 640px */
+            readonly narrow: 640;
+        };
+        /** Container max-width values (content + 80px padding on each side) */
+        readonly containerMaxWidth: {
+            /** Wide container: 1280px (1200 + 80) */
+            readonly wide: 1280;
+            /** Medium container: 940px (860 + 80) */
+            readonly medium: 940;
+            /** Narrow container: 720px (640 + 80) */
+            readonly narrow: 720;
+        };
+    };
+};
+export type LayoutTheme = typeof layout;
+export default layout;

package/build/es/themes/themeComponents/layout.js

@@ -0,0 +1,43 @@
+/**
+ * Page layout constants for consistent sizing across the design system.
+ *
+ * All values are numbers in pixels. Add 'px' suffix when used in CSS.
+ *
+ * @example
+ *     const Container = styled.div`
+ *       max-width: ${theme.layout.content.maxWidth.wide}px; // 1200px
+ *       margin: 0 auto;
+ *     `;
+ */
+const layout = {
+    /** Page-level layout constraints */
+    page: {
+        /** Minimum page width: 320px */
+        minWidth: 320,
+        /** Maximum page width: 2560px */
+        maxWidth: 2560,
+    },
+    /** Content area layout constraints */
+    content: {
+        /** Content max-width values (pure content area without padding) */
+        maxWidth: {
+            /** Wide/Normal content: 1200px */
+            wide: 1200,
+            /** Medium content: 860px */
+            medium: 860,
+            /** Narrow/Small content: 640px */
+            narrow: 640,
+        },
+        /** Container max-width values (content + 80px padding on each side) */
+        containerMaxWidth: {
+            /** Wide container: 1280px (1200 + 80) */
+            wide: 1280,
+            /** Medium container: 940px (860 + 80) */
+            medium: 940,
+            /** Narrow container: 720px (640 + 80) */
+            narrow: 720,
+        },
+    },
+};
+
+export { layout as default };

package/build/es/themes/themeComponents/navigation.d.ts

@@ -11,7 +11,6 @@ export declare const mobileLogoSize = "3.75em";
 export declare const desktopLogoSize = "5.25em";
 export declare const menuItemMargin = "1rem";
 export declare const ribbonHeight = "1.5625rem";
-export declare const wideMenuBreakpoint = 1280;
 export declare const IconContainerWidth = "3.75rem";
 export declare const IconContainerMinWidth = "2.5rem";
 export declare const navMaxHeight = "3.75rem";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v4.0.0",
+    "version": "v4.0.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -49,7 +49,7 @@
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.28.5",
         "@dnanpm/icons": "^2.0.9",
-        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/eslintrc": "^3.3.3",
         "@eslint/js": "^9.39.1",
         "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
@@ -66,14 +66,14 @@
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
         "@typescript-eslint/eslint-plugin": "^8.46.4",
-        "@typescript-eslint/parser": "^8.46.4",
+        "@typescript-eslint/parser": "^8.48.1",
         "babel-loader": "^9.2.1",
         "cross-env": "^10.0.0",
         "css-loader": "^6.11.0",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jsdoc": "^61.2.0",
+        "eslint-plugin-jsdoc": "^61.4.1",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.0.1",
@@ -96,15 +96,15 @@
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.102.1"
+        "webpack": "^5.103.0"
     },
     "dependencies": {
         "ramda": "^0.32.0",
-        "react-datepicker": "8.9.0",
+        "react-datepicker": "8.10.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
-        "react-tooltip": "^5.28.1"
+        "react-tooltip": "^5.30.0"
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",